img / div / 字体 垂直居中div 实现方式
第一种:
我认为最简单的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;
}
第二种:
使用绝对定位:前提,父元素 position:relative
(1种):
// 子元素
{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
(2种):知道子元素宽高时
// 子元素
{
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}
(3种)
// 子元素
{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
第三种:img垂直居中box
// img设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}