居中的css 完全指南 翻譯

2021-09-11 07:19:37 字數 1915 閱讀 8012

譯自:

對於行內元素可以使用如下實現水平居中

.blocklist1_1
這種方法對於inline,inline-block,inline-table等都有效。

對於乙個塊元素,可以設定其margin-left和margin-right自動

.blocklist1_2 .div1
無論塊元素的寬度是否已知,都可以實現水平居中。

如果有多個塊元素需要水平居中時,有兩種辦法可以實現。一種是借助inline-block,另一種是借助flex。對於第一種方法可以使用如下方式 設定塊元素display:inline-block,其父元素水平居中:

..blocklist1_3 .div1     

.blocklist1_3 .div1 div

用flex的話需要給塊的父元素新增如下樣式

.blocklist1_3 .div2
垂直居中也分有行內元素和塊元素,不過相比水平居中,垂直居中這裡需要討論的情況有點多,下面我們一一分析。

2.1.1 單行

對於單行的行內元素,我們只需要設定其padding-top和padding-bottom值相等即可

.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等都有效。blocklist1 2 div1無論塊元素的寬度是否已知,都可以實現水平居中。blocklist1 3 div1 blocklist1 3 div1 div.blocklist1 3 di...

CSS居中完整指南

使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症 在塊級父容器中讓行內元素居中,只需使用text align center 這種方法可以讓inline inline...

CSS居中完整指南

使用 css 實現居中效果困難嗎?顯然不是。實際上有許多方法可以實現居中效果,但在具體情況中,我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集,幫助你解決選擇困難症 在塊級父容器中讓行內元素居中,只需使用text align center 這種方法可以讓inline inline...