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

Question

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

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

感谢您帮助我。

Answer 1

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

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

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

水平对齐它们

此处显示了直观表示：

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

保罗。