html - 如何在没有额外 html 的情况下垂直居中文本

Question

我想知道有没有一种方法可以在不使用容器元素的情况下使文本垂直居中。有反应的东西。

编辑我唯一知道的值是 h3 元素的高度，仅此而已，内容将显示在某些下方，如

等

CSS

h3 {
 height: 140px;
 padding-top: 80px;
 min-height: inherit;
 border: 1px solid black;
 text-align: center;
}

HTML

<h3>TEST</h3>

这是我想要实现的一个例子 codepen test

Answer 1

行高是一件美丽的事情，尤其是当它只是文本时。如果您想响应:

h3 {
  background-color: transparent;
  height: 40vh;
  line-height: 40vh;
  min-height: inherit;
  border: 1px solid black;
  text-align: center;
}