居中的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...