css中水平居中怎么写

在网页设计中，居中对于排版来说非常重要，其中水平居中也是很常见的需求之一。在 CSS 中也提供了多种实现水平居中的方法，接下来我们将分别介绍它们。

方法一：使用 text-align 属性实现水平居中

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

上述代码中，我们将父元素的 text-align 属性设置为 center，将子元素的 display 属性设置为 inline-block，这就可以实现子元素水平居中。

方法二：使用 margin 属性实现水平居中

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

这种方法需要先将父元素的 position 设置为 relative，再将子元素的 position 设置为 absolute，然后通过 left: 50% 让子元素距离左侧边框的距离为 50%，最后通过 transform: translateX(-50%) 向左平移子元素的一半宽度实现水平居中。

方法三：使用 flexBox 实现水平居中

.parent{
    display: flex;
    justify-content: center;
}
.child{
    /* 可使用 align-items: center 实现垂直居中 */
}

使用 flexBox 实现水平居中很简单，只需要将父元素的 display 属性设置为 flex，再将 justify-content 属性设置为 center 即可。子元素的对齐方式可以通过 align-item 属性来设置，如上方代码注释中所示。

以上就是 CSS 中实现水平居中的三种方法，可以根据需要选择合适的方法来实现。希望这篇文章对你有所帮助。