1.表格布局
把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
#wrapper {
display: table;
}
#cell {
display: table-cell;
vertical-align: middle;
}
2.绝对定位+负margin
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}
3.绝对定位+transform
#content {
position: absolute;
top: 50%;
height: 240px;
transform:translateY(-50%)
}
4.绝对定位+四个方向都为0+magin:auto
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
5.flex布局
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}