如何正确实现CSS中的div居中？

在CSS中居中div元素是一个常见的需求，本文将介绍几种常用的方法来实现div元素的居中效果。

一、使用margin: auto

margin: auto是一种常用的方法，适用于已知宽度和高度的div元素。只需要将div元素的左右margin设置为auto，即可实现水平居中的效果。示例代码如下：

.center-div {    width: 200px;    height: 100px;    margin-left: auto;    margin-right: auto;}

二、使用flexbox布局

flexbox是一种比较新的CSS布局模型，通过使用flex属性可以很方便地实现div元素的居中效果。示例代码如下：

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

三、使用position: absolute

position: absolute结合top、left、right、bottom属性可以实现绝对定位的div元素的居中效果。示例代码如下：

.center-div {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

总结

本文介绍了三种常用的方法来实现div元素在CSS中的居中效果。根据实际情况选择合适的方法来实现居中效果，可以让页面更加美观和易读。