img / div / 字体 垂直居中div 实现方式

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;
}