代码示例
<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;
}文章来源：https://www.toymoban.com/news/detail-622098.html
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-ali gn:center;文章来源地址https://www.toymoban.com/news/detail-622098.html
.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变为行内块元素
}
到了这里，关于css实现水平居中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
