.blocklist1_1
這種方法對於inline,inline-block,inline-table等都有效。
.blocklist1_2 .div1
無論塊元素的寬度是否已知,都可以實現水平居中。
..blocklist1_3 .div1
.blocklist1_3 .div1 div
.blocklist1_3 .div2
垂直居中也分有行內元素和塊元素,不過相比水平居中,垂直居中這裡需要討論的情況有點多,下面我們一一分析。
2.1.1 單行
.blocklist2_1_1 .div1
.blocklist2_1_1 .div2
2.1.2 多行
對於多行元素我們有四種方式可以實現垂直居中:
.blocklist2_1_2 .div1
.blocklist2_1_2 .div2
.blocklist2_1_2 .div2>div
.blocklist2_1_2 .div3
.blocklist2_1_2 .div4
.blocklist2_1_2 .div4::before
.blocklist2_1_2 .div4>div
2.2.1 塊元素高度已知
在網頁布局中有的時候我們知道元素的高度,有的時候我們不知道。對於已知高度的塊元素可以這樣設定來實現垂直居中(demo):
.blocklist2_2_1 .div
.blocklist2_2_1 .div div
2.2.2 塊元素高度未知
有時候我們是不知道塊元素的高度的,這時候可以使用transform來實現(demo):
.blocklist2_2_2 .div
.blocklist2_2_2 .div div
2.2.3 利用flex實現
除了以上兩種辦法,還可以使用flex實現(demo):
.blocklist2_2_3 .div
有的時候我們不僅希望水平居中還希望垂直居中,可以結合以上提到的例子進行組合實現,主要分為以下三個方面:
當元素高度和寬度已知時,可以將元素絕對定位,偏移中心50%,然後使用負的margin值實現,如下(demo):
.blocklist3_1 .div
.blocklist3_1 .div div
如果元素的高度和寬度未知呢,我們可以使用變換屬性,在兩個方向賦予50%的負值,如下(demo):
.blocklist3_2 .div
.blocklist3_2 .div div
用flex實現時需要使用兩個中心屬性(demo):
.blocklist3_3 .div
居中的css 完全指南 翻譯
譯自 對於行內元素可以使用如下實現水平居中 blocklist1 1這種方法對於inline,inline block,inline table等都有效。對於乙個塊元素,可以設定其margin left和margin right自動 blocklist1 2 div1無論塊元素的寬度是否已知,都可以...
CSS居中完整指南
使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症 在塊級父容器中讓行內元素居中,只需使用text align center 這種方法可以讓inline inline...
CSS居中完整指南
使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症 在塊級父容器中讓行內元素居中,只需使用text align center 這種方法可以讓inline inline...