HTML结构如下

1
2
3
4
<div class="wrapper">
	<div class="content">
	</div>
</div>

CSS 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
	width: 100%;
	height: 500px;
	text-align: center;
  background: yellow;
}
.content {
	display: inline-block;
	background: red;
	width: 100px;
	height: 100px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

最终效果如下：

vertical-alignment.png

利用垂直变化可以很好地实现这种需求，而且代码量更少。通常使用line-height或者绝对定位的时候，都必须知道元素的高度，而这个方法更加灵活。