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

Question

我是一名初学者，尝试在 css / html 中执行以下操作：

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

谢谢你帮助我。

Answer 1

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

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

这将确保无论子元素中有多少项，它们始终垂直对齐。然后，您可以使用 align-items: center; 水平对齐它们；

此处显示了视觉表示：

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

保罗。