[分享]css中如何设置div水平居中

CSS中设置div居中有多种方法，以下介绍其中两种较为常见的方法。

/* 方法一：使用margin实现水平居中 */
div {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin: 0 auto; /* margin-left和margin-right设为auto */
} 

以上代码中，margin-left和margin-right都设为auto，这表示让浏览器自动计算左右两侧的边距，从而实现水平居中。

/* 方法二：使用flex布局实现水平居中 */
.container {
    display: flex; /* 将容器设置为弹性盒子 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.container div {
    width: 200px;
    height: 100px;
    background-color: #ccc;
} 

以上代码中，将容器设置为弹性盒子，并使用justify-content属性将其中的子元素水平居中，使用align-items属性将其垂直居中。

以上便是两种设置div水平居中的方法，可以根据实际需求选择不同的方法。