html - 如何在标题中垂直居中文本？

Question

我有一个 <h1>设置了宽度和高度的元素。我想将其中的文本垂直居中，但我似乎做不到。文本可以是单行或多行的。请在下面查看我的代码:

h1 {
  width: 150px;
  height: 150px;
  background-color: #888;
  color: white;
  text-align: center;
  vertical-align: middle;
}

<h1>Test</h1>

Answer 1

以下解决方案适用于单行或多行文本。

1。 flex 盒:

h1 {
  width: 200px;
  height: 200px;
  margin: 0;
  background-color: gray;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<h1>A quick brown fox</h1>

2。 CSS 表格单元格:

h1 {
  width: 200px;
  height: 200px;
  margin: 0;
  background-color: gray;
  color: white;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<h1>A quick brown fox</h1>

3。行高(+ <span> ):

h1 {
  width: 200px;
  height: 200px;
  margin: 0;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 200px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

<h1><span>A quick brown fox</span></h1>