How to Vertically Center Text With CSS?

css

There are different ways to vertically center text with CSS, depending on the context and the desired result. Here are some examples:

1. Using line-height: One simple way to center text vertically within a container is to set the line-height property of the text to the height of the container. For example:

HTML:

<div class="container">
  <p class="centered">This text is centered vertically</p>
</div>

CSS:

.container {
  height: 100px;
  border: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered {
  line-height: 100px;
}

In this case, the container has a fixed height of 100 pixels, and the centered class sets the line-height to the same value. The container also uses flexbox to horizontally and vertically center the content. This method works well for single-line text, but may not be suitable for longer blocks of text or dynamic content.

2. Using flexbox: Flexbox is a powerful CSS display property that allows you to easily align items within a container. To center text vertically using flexbox, you can set the display property of the container as flex and use the justify-content and align-items properties to center the content. For example:

HTML:

<div class="container">
  <p class="centered">This text is centered vertically</p>
</div>

CSS:

.container {
  height: 100px;
  border: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered {
  text-align: center;
}

In this case, the container uses flexbox to center both horizontally and vertically. The align-items property centers the content vertically, while the justify-content property centers it horizontally. The centered class sets the text-align property to center, which centers the text inside the block.

3. Using position and transform: Another way to vertically center text is to use position: absolute and transform: translate. This method works well when the container has a fixed height and the text should be in the middle of the container, regardless of its length. For example:

HTML:

<div class="container">
  <p class="centered">This text is centered vertically</p>
</div>

CSS:

.container {
  height: 100px;
  border: 1px solid gray;
  position: relative;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In this case, the container has a fixed height and position: relative, which allows the centered class to use position: absolute. The top: 50% and left: 50% properties position the text at the center of the container, and transform: translate(-50%, -50%) moves it up and left by half of its width and height, respectively. This method can work well for longer blocks of text, but may require some adjustments for different font sizes and line breaks.

These are just a few examples of how to vertically center text with CSS. There are many other techniques, such as using table and table-cell display properties, CSS grids, or JavaScript calculations. Choose the one that works best for your specific case and style it to fit your design.

Latest Questions