CSS中的居中，在工作中，會經(jīng)常遇到。它可以分為水平居中和垂直居中，以下是幾種實現(xiàn)居中的方式。

以下例子中，涉及到的CSS屬性值。

.parent-frame { width: 200px; height: 200px; border: 1px solid red; } .child-frame { width: 100px; height: 100px; border: 1px dotted blue; }

1: text-align:center，水平居中

塊狀元素，水平居中

子元素水平居中 塊狀元素，水平居中

子元素水平居中

塊狀元素，水平居中

2：margin: 0 auto，水平居中

水平居中。上下外邊框距為0，左右外邊距瀏覽器會自動計算平分

子元素水平居中 塊狀元素，水平居中web前端開發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)

子元素水平居中

塊狀元素，水平居中

3：line-height值，垂直居中

垂直居中。line-height屬性，設(shè)置行間的距離(行高)。不允許使用負(fù)值。

單行文本的元素才適用，多行元素中不適用這種方法。元素內(nèi)容是單行，并且其高度是固定不變的，

line-height值=父height值

line-height值=父height值

4： 使用float屬性，配合relative定位，實現(xiàn)水平居中

給父元素設(shè)置float，然后將父元素整體向右移動50%，再將子元素整體向左移動50%，來實現(xiàn)水平居中。

記得將父元素清除浮動。

雖然寬度不同weiqinl 但一樣 水平居中了 使用float屬性，記得清楚浮動

雖然寬度不同weiqinl 但一樣 水平居中了 使用float屬性，記得清楚浮動

5：使用table布局，默認(rèn)垂直居中

table默認(rèn)垂直居中vertical-align:middle。如果還想要水平居中，那就是行內(nèi)元素，添加屬性text-align: center

table默認(rèn)垂直居中[vertical-align: middle]

水平居中添加text-align:center

6: 仿table，display:table-cell。并使用vertical-align屬性,實現(xiàn)垂直居中

該屬性設(shè)置元素的垂直對齊方式。

定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。在表單元格中，這個屬性會設(shè)置單元格框中的單元格的對齊方式。

仿table: display:table-cell垂直居中vertical-align:middle web前端開發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)

仿table: display:table-cell垂直居中vertical-align:middle

7: 使用absolute絕對定位，配合margin使用，實現(xiàn)水平垂直居中

相對應(yīng)于relative的絕對定位absolute，需要定寬。同時，top/bottom應(yīng)該相等，并且相加不超過定寬度。 right/left也應(yīng)該相等，并且相加不超過定寬。

再配合margin： auto使用

利用絕對定位，配合margin:auto自動計算外邊距。 定寬元素,需要確定的尺寸。relative是為了給子元素定位用。

利用絕對定位，配合margin:auto自動計算外邊距。 定寬元素,需要確定的尺寸。relative是為了給子元素定位用。

8: 使用absolute絕對定位，配合margin的負(fù)值(negative margins)來實現(xiàn)水平垂直居中。

negative margins負(fù)邊距，會使結(jié)構(gòu)塌陷，利用這個特點來實現(xiàn)。

利用絕對定位，配合margin的負(fù)值來實現(xiàn)居中。 負(fù)邊距來實現(xiàn)，水平垂直居中。需要知道該元素的具體大小

利用絕對定位，配合margin的負(fù)值來實現(xiàn)居中。 負(fù)邊距來實現(xiàn)，水平垂直居中。需要知道該元素的具體大小

9: 使用absolute絕對定位，配合translate 移動轉(zhuǎn)換，實現(xiàn)水平垂直居中

使用百分比來絕對定位一個元素，并配合使用translate，將元素移動定位居中。

利用絕對定位，配合translate移動到水平垂直居中。 不需知具體大小。支持IE9+及現(xiàn)代瀏覽器

利用絕對定位，配合translate移動到水平垂直居中。 不需知具體大小。支持IE9+及現(xiàn)代瀏覽器

10： 使用flex布局,設(shè)置其屬性justify-content，align-items都為center，實現(xiàn)水平垂直居中

父元素使用flex布局,并定義兩個屬性值justify-content，align-items都為center，那么就定義為水平垂直居中

justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。

使用flex布局，justify-content屬性定義了項目在主軸上的對齊方式。 align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊 web前端開發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)

使用flex布局，justify-content屬性定義了項目在主軸上的對齊方式。 align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊

11: 利用flex布局，配合margin：auto使用，實現(xiàn)水平垂直居中。

父元素使用flex布局，子元素使用margin: auto

父元素使用flex布局，子元素配合margin:auto使用

父元素使用flex布局，子元素配合margin:auto使用

總結(jié)

以上是生活随笔為你收集整理的css 垂直居中_html中div使用CSS实现水平/垂直居中的多种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。