我正在CMS中建立一个网站.有许多元素需要垂直居中的内容.但是,由于我没有最终内容(以及任何内容可以并且将来会改变)我无法为这些容器设置固定高度.

我花了好几分钟试图弄清楚为什么我的元素不会使用flexbox垂直对齐……直到我发现它缺乏固定的高度.

在过去,我使用display：table / table-cell组合构建了这样的布局.我最近开始越来越多地使用flexbox模型,并且真的开始喜欢那些并且宁愿停止使用table / table-cell.

现在我想知道如何(或者如果)我可以使用flexbox来垂直对齐内容,无论容器的高度如何.

最佳答案 如果您的Flex容器是flex-direction：row(默认方向),则可以使用垂直居中的内容：

align-items: center; /* for a single line of flex items */
align-content: center; /* for multiple lines of flex items */

如果您的Flex容器是flex-direction：列,则可以使用以下内容垂直居中：

justify-content: center;

这些方法无需定义任何高度即可工作.

有关更多详细信息,插图和现场演示,请参阅我的答案：https://stackoverflow.com/a/33049198/3597276

从那个答案：

Below are two general centering solutions. One for vertically aligned flex items (flex-direction: column) and the other for horizontally aligned flex items (flex-direction: row). In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn’t matter.