一直是个比较头疼的问题，但是基于FlexBox的垂直居中却非常简单。考虑以下场景：你正在使用网格布局框架，如Bootstrap、Foundation、Skeleton、Susy等，你有两列动态内容（每列是一个盒子模型），你不知道确切的大小每一列，也不是哪一个更高。您需要将两列垂直居中。我们想要的布局是这样的：但是默认情况下，两列会顶部对齐：那么问题来了，在不改变浮动布局的情况下，我们应该如何让元素垂直居中对齐呢？到目前为止，这个简单的问题已经很难解决了。是否可以使用vertical-align:middle不幸的是，不可以，原因有几个。首先，在MDN->CSS中有vertical-align的描述vertical-alignCSS属性指定了一个inline或table-cellbox的垂直对齐方式。我们的元素不是inline，inline-block或table-cells，所以如果不更改显示，vertical-align:middle将不起作用。其次，网格布局框架使用float:right来定位我们的双列元素，这在W3C->CSS->9.5.1的第8条中有描述定位浮动：'float'属性浮动框必须放置为尽可能高。这意味着浮动元素将始终固定在顶部。我们可以通过将显示更改为inline-block或table-cell来解决第一个问题，但是没有任何CSS技术可以解决第二个问题。我们需要移除浮动规则，但这会破坏基于网格的布局框架的基础。使用Flexbox解决问题和往常一样，Flexbox对我们的问题有一个简单的解决方案。它只需要两个简单的步骤：向元素添加display:flex规则。向元素添加'align-items:center规则。就是这样！这是一个简单的HTML和CSS示例：
