垂直居中

一直以来缺乏好的垂直居中的方法，是 CSS 的黑点。

更糟糕的是，目前的垂直居中的技术晦涩而又反直觉，最直接的选择(比如 vertical-align:middle) 从未起过作用。

目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧，包括全高的伪元素。这些技术有时候能够生效，然而并不是所有情况都能如愿。如果你想垂直居中一个形状不确定，或者子元素不是父元素唯一的子元素呢？如果你能用伪元素居中这种奇技淫巧，但是你又想用伪元素做些其他的事呢？

用了 Flexbox 布局，不再纠结这些麻烦。你可以任意对齐(垂直或者水平)，仅仅设置align-items, align-self, 和 justify-content 这些属性就好。

我居中啦!

This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.

不像一些现存的垂直居中技术，Flexbox 垂直居中并不会影响其相邻元素的对齐方式。

顶
中
底

HTML 代码

<div class="Aligner">
    <div class="Aligner-item Aligner-item--top">…</div>
    <div class="Aligner-item">…</div>
    <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

CSS 代码

.Aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Aligner-item {
    max-width: 50%;
}

.Aligner-item--top {
    align-self: flex-start;
}

.Aligner-item--bottom {
    align-self: flex-end;
}

在 Github 中查看这个 demo 中完整的垂直居中组件 源代码