垂直居中

1、vertical-align

设置的行内元素所在行的对齐基线，对行内元素和行内块状元素均有效

vertical-align: middle;

2、line-height

设置子元素的行高和父元素的高度相同，与 vertical-align 配合使用

3、position + margin

设置子元素相对于父元素为绝对定位,再设置元素的margin为负

position: absolute；
left: 50%;
top: 50%；
margin-left: -20px;//元素宽度的一半
margin-top: -20px;//元素高度的一半

4、position + transform

position: absolute；
left: 50%;
top: 50%；
transform: translate(-50%, -50%);

5、position + margin +固定宽高

width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;

6、position + margin

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

应用

1、图片垂直居中

<div class="parent">
	<div class="child1">
		<img src="images/dh.png" alt="">测试文字
	</div>
	<div class="child2">
		<img src="images/dh.png" alt="">测试文字
	</div>
</div>

.parent {
	height: 100px;
	width: 100%;
	background-color: #000;
	color: #fff;
}
.child1 {
	float: left;
	line-height: 100px;
}
.child1 img{
	vertical-align: middle;
}
.child2 {
	float: right;
	line-height: 100px;
}

效果：

1、当为 .child1 和 .child2 设置了和父元素高度大小一样的行高后，"测试文字" 就会居中，而这时候两个导航图片则不会。这里 "测试文字居中" 也只是差不多居中，因为它的 vertical-align 其实为 baseline ，有细微的差别。因此想要文字完全居中，可以使用 span 包裹后设置 vertical-align = middle。

2、再为 .child1 设置 vertical-align = middle ,导航图片就会居中了。

3、.child2 的导航图片并未垂直居中，可以看到它与文字的基线对齐了，其实还是因为它的垂直对齐方式为 baseline。

总结：

原理：img 属于行内元素，所以 vertical-align 对其有效。