代码示例
<div class="box"><div class="box1"></div>
</div>
1.弹性布局：（推荐）
display:flex；
这些要添加在父级的，是父级的属性
//父级添加display:flex;
//父级添加justify-content:center;
.box{width: 500px;height: 300px;background-color: aquamarine;display: flex;/*主轴-x轴：居中*/justify-content: center;
}
.box1{width: 200px;height: 100px;background-color: lightpink;
}
效果图:
2.添加margin值auto
外边距可以让块级盒子水平居中，但是必须满足两个条件：
①盒子必须指定了宽度
②盒子左右的外边距都设置为auto
.header{
width:960px;
margin:0 auto;
}
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-ali gn:center;
.box{width: 500px;height: 300px;background-color: aquamarine;}
.box1{width: 200px;height: 100px;background-color: lightpink;margin: 0 auto;
}
3.text-align:center+行内块元素
.box{width: 500px;height: 300px;background-color: aquamarine;text-align: center; //父级添加text-align: center;
}
.box1{width: 200px;height: 100px;background-color: lightpink;display: inline-block; //把div变为行内块元素
}
