一、使用margin:

1 #center0 { 2 background: red; 3 margin: 0 auto; 4 }

或者：

1 margin: auto;

這樣的前提是父盒子里沒有其他盒子。

二、使用position（有些地方不太好用）

#center1{position: absolute;left:50%;margin-left: -(div寬度的一半) }

三、使用伸縮盒flex

在需要居中的盒子外面再包一層盒子，對這個父盒子進(jìn)行設(shè)置：

1 display: flex; 2 justify-content: center; 3 align-items: center;

伸縮盒是個很強(qiáng)大的工具，對屏幕適配性有很好的支持

四、-webkit-box

1 #d5 { 2 width: 100%; 3 display: -webkit-box; 4 -webkit-box-pack: center; 5 }

給父元素設(shè)置上述代碼。這個屬性比較奇特，去查了一下，有些爭議，表示也無法深入理解，可以參考這里的討論：

https://www.zhihu.com/question/22991944

五、使用table

1 .grandfather { 2 width: 100%; 3 height: 100%; 4 display: table; 5 } 6 .father{ 7 display: table-cell; 8 text-align: center; 9 } 10 .son { 11 display: inline-block; 12 background: green; 13 }

這里的最內(nèi)部盒子son居中

六、使用position和transform

1 #center6{ 2 position:absolute; 3 left:50%; 4 transform:translateX(-50%); 5 background:#08ffbc; 6 }

這個跟position+margin原理相同，都是將多余部分移回原位，但是不需要計算具體大小，用百分比適配性好

轉(zhuǎn)載于:https://www.cnblogs.com/wz71014q/p/8604933.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的DIV水平方向居中的几种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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