img / div / div vertically centered implementations Font
The first:
我认为最简单的img垂直居中div
html:
<div class="app-logo">
<img src="${ctx}/static/img/logo.png">
<i class="visible"></i>
</div>
css:
.app-logo {
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
}
.app-logo img{
width: 180px;
height: 40px;
vertical-align: middle;
}
.app-logo .visible{
display: inline-block;
}
The second:
使用绝对定位:前提,父元素 position:relative
(One kind):
// 子元素
{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
(2 types): The width and height of the child elements know
// 子元素
{
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}
(3 types)
// 子元素
{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
Third: img vertical center box
// img设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}