将两个浮动元素垂直居中放置在未知的高度包装器中

Question

我是初学者，尝试在CSS / HTML中执行以下操作：

我有两个浮动元素，一个在左边，一个在右边。 我希望这两个元素在没有定义高度的包装中垂直居中。 当包装器具有定义的高度时，我只找到了一种解决方案，但是随着文本内容的动态添加，我的包装器可以具有各种高度。

感谢你们对我的帮助。

Answer 1

您最好使用弹性盒。 在父元素（即div）上，执行以下操作：

display: flex;
flex-direction: column;
justify-content: center;

这样，无论子元素中有多少个项目，它们都将始终垂直对齐。 然后，您可以使用align-items将它们水平对齐：

此处显示了可视化表示：

http://codepen.io/pauljohnknight/pen/oZLJPG

保罗