總結:讓元素居中的九種方法
阿新 • • 發佈:2019-02-27
方向 spa 彈出 子元素 tex 組件 div 內聯元素 on()
一、text-align:center;
前提:元素沒有浮動,而且是內聯元素(如:span、img、b)。如果是塊級元素,要把塊級元素設置成display:inline-block;或display:inline;
二、margin:auto;
前提:元素必須是塊級元素,如果是內聯元素,必須設置為display:block;
三、position:absolute;+定位+偏移(已知寬高,需計算偏移值)
div { position: relative; width: 250px; height: 250px; } div img{ width: 200px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -70px; }
四、position:absolute;+定位(四個方向)+margin:auto;
div { position: relative; width: 250px; height: 250px; } div img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
優點:不需要知道元素的寬、高,而且瀏覽器的兼容性好。
五、position:absolute;+定位+transform:translate(-50%,-50%);
div { position: relative; width: 250px; height: 250px; } div img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
說明:該方法的優點是不需要知道元素的寬度和高度,在移動端用的比較多,因為移動端對css3新屬性的兼容性比較好。
六、利用彈性布局居中
div { width: 250px; height: 250px; display: flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ }
- Flexbox布局最適合應用程序的組件和小規模布局,而 Gird 布局則適用於較大規模的布局。
- 設為Flex布局以後,子元素的float、clear和vertical-align屬性將失效
- 使用flex居中不需要知道元素本身寬高以及元素的屬性
七、jquery方法實現
jquery實現水平和垂直居中的原理是通過jquery設置div的css,獲取div的左,上的邊距偏移量,邊距偏移量的算法就是用頁面窗口的寬度減去該div的寬度,得到的值再除以2即左偏移量,右偏移量算法相同。註意div的css設置要在resize()方法中完成,就是每次改變窗口大小是,都要執行設置div的css,代碼如下
$(function(){ $(window).resize(function(){ $(‘.mydiv‘).css({ position:‘absolute‘, left:($(window).width()-$(‘.mydiv‘).outerWidth())/2, top:($(window).height()-$(‘.mydiv‘).outerHeight())/2 }); }); })
此方法的好處就是不需要知道div 的具體寬度和高度,直接用jquery就可以實現水平和垂直居中,並且兼容各種瀏覽器。這個方法在很多的彈出層效果中應用。
八、css3新屬性calc()和定位配合使用(需要知道元素的寬高)
- 需要註意的是,運算符前後都需要保留一個空格,例如:width: calc(100% - 10px);
- 任何長度值都可以使用calc()函數進行計算;
- calc()函數支持 "+", "-", "*", "/" 運算;
- calc()函數使用標準的數學運算優先級規則;
div { position: relative; width: 250px; height: 250px; } div img { width: 200px; height: 140px; position: absolute; left: calc(50% - 100px); top: calc(50% - 70px); }
九、display:table-cell;實現居中
合使用display:table-cell和vertical-align、text-align,使父元素內的所有行內元素水平垂直居中(內部div設置display:inline-block即可)。這在子元素不確定寬高和數量時,特別實用!
div { display: table-cell; width: 250px; height: 250px; text-align: center; vertical-align: middle; float: none; } div img { display: inline-block; }
- 1.table-cell不感知margin,在父元素上設置table-row等屬性,也會使其不感知height。
- 2.設置float或position會對默認布局造成破壞,可以考慮為之增加一個父div定義float等屬性。
總結:讓元素居中的九種方法