未知高度div垂直水平居中方法:
<div class="wrap">
<div class="test">sdfdsfdsf<br>sadsad</div>
</div>
1).wrap {
width: 300px;
height: 300px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.wrap:after{
display:inline-block;
content: '';
vertical-align: middle;
height: 100%;
}
.test {
background: red;
display: inline-block;
vertical-align: middle;
}
2)
.wrap {
width: 300px;
height: 300px;
position: relative;
background: rgba(0, 0, 0, 0.5);
}
.test{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: red;
}
3).wrap {
width: 300px;
height: 300px;
display: table-cell;
background: rgba(0, 0, 0, 0.5);
vertical-align: middle;
text-align: center;
}
.test{
display: inline-block;
background: red;
}
4)
.wrap {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
vertical-align: middle;
text-align: center;
}
.test{
background: red;
}
图片垂直居中方法
<div class="wrap">
<img src="appicon.png" class="test">
</div>
.wrap{
width: 300px;
height: 160px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
.wrap:after{
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}
img{
vertical-align: middle;
}