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水平居中的方法,可以根据实际需求选择不同的方法。