Search code examples
htmlcsscenter

How to center text vertically if line break occurs

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.

Solution

  • You can use display: flex; to make it vertically centered:

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