css实现水平居中

代码示例

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