一个垂直居中的方法

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

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