CSS实现水平居中的五种方法有哪些？

本文共计686个文字，预计阅读时间需要3分钟。

元素水平居中的一种方式 + 子元素不需要宽度也可 + div class=box div class=son 我是内容 + /div/div.box + { width: 500px; height: 300px; background: pink; } .son { width: 300px; margin: auto; text-align: center; backgro

元素水平居中的第一种方式 子元素不需要宽度也可以

<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; } .son { width: 300px; margin: auto; text-align: center; background: red; } 使用的是margin:auto 这样在水平方向上就可以居中了

margin: 100px auto 注意点：

有的小伙伴说:想要上下有一点的间距 可以使用 margin: 100px auto; 但是使用之后，我们发现了一些小的问题。 从上面效果图可以发现：两个盒子同时向下移动。 这种情况并不是我们想要的。