How to center text vertically in a heading?

Question

I have an <h1> element that has width and height set. I want to vertically center the text in it, but I can't seem to do it. The text can be either single or multi-lined. Please see my code below:

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

<h1>Test</h1>

Answer 1

The following solutions work for both single or multi-lined text.

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. Line height (+<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

If there is only one line of text, just set the line-height to 150px:

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

<h1>Test</h1>

However, this will only work if the text doesn't wrap. If it does, you can use flexbox to center it:

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>