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

Question

我有一个<h1>元素，其宽度和高度已设置。我想将文本垂直居中，但我似乎无法做到。文本可以是单行或多行。请参阅下面的代码：

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

<h1>Test</h1>

Answer 1

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

1。 Flexbox的：

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 table-cell：

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>

Answer 2

如果只有一行文字，只需将line-height设置为150px：

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

<h1>Test</h1>

但是，这只有在文本没有换行时才有效。如果是，您可以使用flexbox将其居中：

h1 {
  width: 150px;
  height: 150px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #888888;
  color: white;
  text-align:center;
  vertical-align: middle;
}

<h1>Super Monkey!</h1>