哇，这个问题很流行。这是基于对vertical-align财产的误解。这篇优秀的文章解释了它：

理解vertical-align，或 Gavin Kistner
的“如何（不）垂直居中内容”。

“如何在 CSS 中居中” 是一个很棒的网络工具，可以帮助找到不同情况下必要的
CSS 居中属性。

简而言之（并防止链接腐烂）：

• 内联元素 （并且 只有 内联元素）可以通过vertical-align: middle. 但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle 示例
• 对于块元素，垂直对齐更难，很大程度上取决于具体情况：
  • 如果内部元素可以有一个 固定的高度 ，你可以确定它的位置absolute并指定它的height,margin-top和top位置。jsfiddle 示例
  • 如果居中元素 由单行组成 并且 其父高度是固定 的，您可以简单地设置容器line-height来填充其高度。根据我的经验，这种方法非常通用。jsfiddle 示例
  • ——这样的特殊情况还有很多。