第一种方法:父元素样式属性display:flex;子元素使用margin:auto,但是IE存在兼容性问题
<div class="box">
<div class="center-box1">
<p>第一种方法</p>
</div>
</div>
.box {
background: #97e3bd;
width: 100%;
height: 450px;
display: flex;
color: white;
text-align: center;
}
.center-box1 {
margin: auto;
width: 200px;
background: #4bad91;
}
预览结果
第二种方法: 已知子元素的宽和高-margin: auto + 绝对定位
<div class="box">
<div class="center-box2">
<p>第二种方法</p>
</div>
</div>
.box {
background: #97e3bd;
width: 100%;
height: 450px;
position: relative;
color: white;
text-align: center;
}
.center-box2 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #4bad91;
margin: auto;
}
预览效果
第三种方法: 已知div等块级元素的宽度和高度,使用绝对定位absolute和外边距实现水平垂直居中。
<div class="box">
<div class="center-box3">
<p>第三种方法</p>
</div>
</div>
.box {
background: #97e3bd;
width: 100%;
height: 450px;
position: relative;
color: white;
text-align: center;
}
.center-box3 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: #4bad91;
}
预览效果
第四种方法:transform(IE9以下不支持)
<div class="box">
<div class="center-box4">
<p>第四种方法</p>
</div>
</div>
.box {
background: #97e3bd;
width: 100%;
height: 450px;
position: relative;
color: white;
text-align: center;
}
.center-box4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #4bad91;
width: 200px;
}
预览效果
第五种方法:display: flex + 主侧轴居中对齐,移动端常用
<div class="box">
<div class="center-box5">
<p>第五种方法</p>
</div>
</div>
.box {
background: #97e3bd;
width: 100%;
height: 450px;
display: flex;
color: white;
text-align: center;
justify-content: center;
align-items: center;
}
.center-box5 {
width: 200px;
background: #4bad91;
}
预览结果
第六种方法:display:inline-block +父级元素设置display:table-cell (固定宽高)
<div class="box">
<div class="center-box6">
<p>第六种方法</p>
</div>
</div>
.box {
background: #97e3bd;
height: 450px;
width: 450px;
color: white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.center-box6 {
display: inline-block;
width: 200px;
background: #4bad91;
}
效果预览