如何实现CSS元素水平居中的五种方法？

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

元素水平居中的一种方式是使用CSS。子元素不需要固定宽度，也可以使用div标签，例如：

我是内容

CSS样式：

css.box { width: 500px; height: 300px; background: pink;}

.son { width: 300px; margin: auto; text-align: center; background: #fff;}

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

<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; 但是使用之后，我们发现了一些小的问题。 从上面效果图可以发现：两个盒子同时向下移动。 这种情况并不是我们想要的。