center with line-height 没有height

Question

如您所知，我们可以使用 line-height 属性的值等于容器的 height 属性来垂直居中单行在该容器内：

.container {
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  outline: 1px solid red;
}

<div class="container">
  <p>This is some text.</p>
</div>

我在很多参考资料中看到过这种方法，例如：

现在问题来了，为什么要设置height属性？是否有必要，或者我们可以仅使用 line-height 来管理？

Answer 1

如果存在单个文本，您的行高将足以使文本垂直居中。这是因为，即使只有 1 条线，等于 200px，也会自动将 min-height 设置为 200px。

.container {
  width: 300px;
  line-height: 200px;
  text-align: center;
  outline: 1px solid red;
}

<div class="container">
  <p>This is some text.</p>
</div>

现在，让我们看看没有文本的例子。

在这里，在这种情况下，您的行高不起作用，因为不存在文本。在这种情况下，你的 height:200px 会派上用场，因为仍然没有文本，它至少会提供 200px 的高度，即使没有任何内容（所以在这里，如果你想要一些高度总是存在，即使没有任何数据，height:200px 都会有用）。

.container {
  width: 300px;
  line-height: 200px;
  text-align: center;
  outline: 1px solid red;
}

<div class="container">
  <p></p>
</div>

Center with line-height without height