css实现水平居中

代码示例

<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变为行内块元素
}