實現CSS居中的多種方法

居中在 CSS 中用的也比較常見，總結幾種自己比較熟悉的居中的寫法。當然，肯定還有更多更不錯的寫法，對於文中不足的地方也歡迎指正。

假設現在給出這種場景：

<div class="parent">n <div class="child">n DEMOn </div>n</div>n

其中在 class=child 這個 div 中的內容長度是不一定的，現在需要實現這個 div 的居中。

水平居中

1.1 display: inline-block

在塊級父容器中讓行內元素或者類行內元素居中，只需使用 text-align: center，

.child {n display:inline-block;n /*子元素文字會繼承居中，因此要在上面寫上向左邊居中*/n text-align:left;n}n.parent {n text-align:center;n}n

當有多個 child div 的時候如果設置 display: inline-block 的時候需要注意每個 div 之間會有縫隙，這不是什麼 bug ，特性就是如此。。

如果想去掉這些縫隙的話，有幾種解決方法：

1.去掉 HTML 中的空格。

元素之間留白間距出現的原因是因為標籤段之間的空隙，這個時候只需要去除掉 HTML 之間的空隙就好了。

比如這種寫法，當然寫法也有很多種，只要保證把空隙去掉就可以了，但是這種方法總覺得寫起來有點反人類。

<div class="parent">n <div class="child">n DEMO1</divn ><div class="child">n DEMO2</divn ><div class="child">n DEMO3</div>n</div>n

2.使用 margin 負值

這種方法這個負的值不太好確定，和上下文的字體等等都有關，這種方法不太適合大規模的使用。

.child {n margin-right; -5px;n}n

3.使用 font-size: 0

這種方法能十分簡單地這個間距問題，只需要將父 div 的 font-size 設為0 ，然後記得將子 div 的 font-size 屬性設置回來即可。

.parent {n font-size: 0;n}n.chilc {n font-size: 16px;n}n

4.使用 letter-spacing 或者 word-spacing

.parent {n letter-spacing: -5px;n /*或者*/n word-spacing: -5px;n}n.chilc {n letter-spacing: 0;n /*或者*/n word-spacing: 0;n}n

1.2 display:table

table 元素的寬度也是跟著內容走，居中的時候加上 margin 即可。兼容IE8。

如果不設置成table,設置成別的塊級元素也可以，但是要強調設置寬度width，不然會拉伸成父元素的寬度。(注意加上 width 這種方法拓展性不好，如果 child div 裡面的內容很長的話可能超過設置的 width 的寬度)

.child {n display:table;n margin:0 auto;n}n

1.3 position: absolute

absolute 元素的寬度默認也是由內容決定

這種方法的優點是居中的元素不會對其他元素產生影響 脫離正常流

.parent {n position:relative;n}n.child{n position:absolute; /*參照物是父容器*/n left:50%;n transform:translateX(-50%); /*百分比的參照物是自身*/n

1.4 dispaly: flex

只兼容IE10+

.parent {n display:flex;n justify-content:center;n}n/*或者*/n.child{n margin：0 auto;n}n

2.垂直居中

2.1 display: table-cell

可以使高度不同的元素都垂直居中

.parent {n display:table-cell;n vertical-align:middle;n}n

2.2 position: absolute

.parent {n position:relative;n}n.child{n position:absolute;n top:50%; /* 參照物是父容器 */n transform:translateY(-50%); /*百分比的參照物是自身 */n}n

2.3 display: flex

只兼容IE10+

.parent {n display:flex;n align-items:center;n}n/*或者*/n.child{n margin：0 auto;n}n

3.水平垂直居中

這種就只需要把前幾種的結合起來就行了，主要有三種常見的方法。

3.1 inline-block + table-cell

.child {n display:inline-block;n text-align:left;n}n.parent {n text-align:center;n display:table-cell;n vertical-align:middle;n}n/*子元素文字會繼承居中，因此要在上面寫上向左邊居中*/n

3.2 absolute + transform

.parent {n position:relative;n}n.child{n position:absolute;n left:50%;n top:50%; /*參照物是父容器*/n transform:translate(-50%,-50%); /*百分比的參照物是自身*/n}n

3.3 flex + align-items + justify-content

.parent {n display:flex;n justify-content:center;n align-items:center;n}n

推薦閱讀：