使用純CSS解決垂直居中有哪些方案?
網(wǎng)友解答: 已知盒子具體寬度(適用于居中浮動(dòng)元素)給父元素相對定位,給子元素絕對定位 left: 50%;top: 50%; margin-left: 。margin-left: -(寬
給父元素相對定位,給子元素絕對定位 left: 50%;top: 50%; margin-left: 。margin-left: -(寬度度/2)。 margin-top: -(高度/2);
寬度和高度未知 并不是說盒子沒有寬度和高度,只是自己未知。給父盒子相對定位, 給子盒子設(shè)定絕對定位 top、right、bottom、left全為0,此時(shí)當(dāng)設(shè)置絕對定位四個(gè)方向都為0時(shí),瀏覽器不知道你所處的位置,這時(shí)設(shè)置margin:auto,應(yīng)驗(yàn)起到作用,但這個(gè)方法不到萬不得已時(shí),不要使用
彈性布局(flex布局)為父級(jí)元素開啟fllex布局 display:flex;
justify-content: center; //定義多根軸線的對齊方式(定義水平方向的位置)
align-items: center;//定義項(xiàng)目在交叉軸(垂直方向)的對齊方式
(不過這高大上的它,兼容性不好,不支持IE9及IE9以下)
平移(位移)為父親開啟相對定位position;relative;
為孩子開啟絕對定位position:absolute;top:50%;left:50%;最后利用CSS3中的transform:translate( -50%,-50%); 就可以將盒子居中了(不兼容IE8及IE8以下)
table方法父容器設(shè)置為display:table,子元素(垂直居中顯示的元素)設(shè)置為 display:table-cell 。但是,這種方法不好,因?yàn)闀?huì)破壞整體的布局,畢竟表格布局能不使用就不使用,會(huì)破壞整體的布局,不利于后期維護(hù)
好啦,就分享到這里,關(guān)于這些方法的進(jìn)一步說明和展示,不出問題的話將會(huì)在19:00推送關(guān)于居中的詳細(xì)介紹,若你們有更好的方法記得關(guān)注我并在評(píng)論區(qū)留言:)
網(wǎng)友解答:css也有自帶的居中屬性
text-align: center適用于文字,可在div中左右居中
line-height: 50px文字上下居中(前提是已知盒子高度,50為盒子高度)
div左右居中div1{width: 200px;margin: auto}
這樣div1就會(huì)在父級(jí)中左右居中;
上下居中可用padding屬性上下?lián)伍_。
div在父級(jí)中上下左右都居中