在CSS中垂直对齐的不同方法

Question

我对垂直对齐元素的各种选项感到有点困惑。我已经阅读了几篇文章，这些帖子单独解释了每个选项，但没有找到解释每个选项的不同用例的任何内容。

特别是，以下内容之间有什么区别，何时（不）使用它们以及为什么？

1. align-items：center;
2. vertical-align：middle;
3. margin：auto 0;

此外，似乎在许多情况下需要定义固定高度并将显示设置为flex以使对齐工作，这对响应式设计不利。如何避免这种情况？

Answer 1

第一个align-items: center与display: flex一起使用。这会垂直对齐所有子元素。 第二个vertical-align: middle可以在两个上下文中使用：

• 在其包含的行框内垂直对齐内联元素框。例如，它可用于在文本行中垂直对齐<img>：
• 垂直对齐cell
中table的内容

第三个margin: auto 0只有在顶部和底部有边距时才起作用（并不意味着需要指定它们，我的意思是，你不能将中心跨度或任何其他内联元素与{{1 }}）。 在我看来，使用margin: auto 0是最好的选择，它对于响应式设计绝对不错。你不需要固定的高度。 我希望这能回答你的问题。