CSS8种垂直居中方式
1.通过vertical-align:middle实现垂直居中
.son{
display:inline-block;
vertical-align:middle;
}
2.通过display:flex实现垂直居中
.father{ display:flex; }
.son{ align-self:center; }
3.通过伪元素“:before”实现垂直居中
.father{
width: 500px;
height:500px;
"> blue;
display: block;
}
.father:before{
content: '';
display:inline-block;
vertical-align:middle;
height: 100%;
}
.son{
width: 200px;
height: 200px;
"> black;
display:inline-block;
vertical-align:middle;
}
4.通过dispaly:table-cell实现CSS垂直居中
.father{ display:table; }
.son{
display:table-cell;
vertical-align:middle; }
5.通过隐藏节点实现CSS垂直居中
.hide{
width:50%;
height:25%; }
.son{
width:50%;
height:50%; }
6.已知父元素高度通过transform实现CSS垂直居中
.son{
position:relative;
top:50%;
transform:translateY(-50%); }
7.未知父元素高度通过transform实现CSS垂直居中
.father{
position:relative; }
.son{ position:absolute;
top:50%;
transform:translateY(-50%); }
8.通过line-height实现CSS垂直居中
该方法适用于子元素为单行文本的情况
.father{ height:300px; }
.son{ line-height:300px; }
——学习记录
