css实现水平居中

要努力奋斗鸭2023-08-01 17:37

代码示例

复制代码

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