css实现垂直居中的几种方式

使用绝对定位和transform

此方法的优势在于无需关心定位元素尺寸。

<dl>
  <dt>child</div>
</dl>

dl {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #eee;
}
dt {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translate(0, -50%);
    background-color: #fff;
}

使用 line-height 和 vertical-align

这个方法对于一些inline元素的快速垂直居中还是有一定的效果的。

<dl>
  <dt>child</div>
</dl>

dl {
    width: 300px;
    height: 300px;
    line-height: 300px;
    background-color: #eee;
}
dt {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    background-color: #fff;
}

flex布局

抛开兼容性的话，此方法是我推荐使用的一种。

<dl>
  <dt>child</div>
</dl>

dl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background-color: #eee;
}
dt {
    width: 60px;
    height: 60px;
    background-color: #fff;
}