How to center text vertically if line break occurs

Question

Basically the question I have is about text inside a container. When the screen size gets smaller, it breaks into the next line. At that point, it is no longer centered vertically, because a new line appeared.

How can I keep it vertically centered?

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>

I usually adjust padding for every line break, but that is cumbersome and time consuming. There is got to be a better way.

Answer 1

you have to use display: flex; to make it vertically centered:

.low {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; 
}