<div id="wrap">
<div class="box">
<h1>666</h1>
<h1>666</h1>
<h1>666</h1>
</div>
</div>
第一种方法（absolute+translate）不兼容ie8，因为这个transform属性不兼容ie8
#wrap {
width: 100%;
height: 100%;
background-color: yellow;
position: relative;
}
.box {
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
第二种
#wrap {
width:300px;
height: 300px;
background-color: yellow;
display: table-cell;指定对象作为表格单元格。类同于html标签<td>
text-align: center;
vertical-align: middle;
}
.box {
background-color: red;
display: inline-block;
}
第三种
#wrap {
width: 100%;
height: 100%;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: red;
}
Processed:
0.021, SQL:
9
