HTML結構如下

<div class="wrapper">
    <div class="content">
    </div>
</div>

CSS 如下：

.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

利用垂直變化可以很好地實現(xiàn)這種需求，而且代碼量更少。通常使用line-height或者絕對定位的時候，都必須知道元素的高度，而這個方法更加靈活。