How to Vertically Align Text Within a Div in CSS?

You can vertically align the text in a div using the line-height method.

The CSS(Cascading Style Sheet) properties are used to align the text vertically. Vertically aligning the text on the web page is important for visual balance, focus attention, and improving the readability of content.  There are a few more properties available to vertically align a text such as flexbox and grid layout, absolute position, and table display property. We will discuss these methods in this blog in detail.

Table of Contents:

• Methods to Vertically Align Text Within a Div in CSS
  • Method 1: Using Flexbox Layout
  • Method 2: Using the Grid Layout
  • Method 3: Using line-height Property
  • Method 4: Using table display
  • Method 5: Using absolute position Property
• Conclusion

Methods to Vertically Align Text Within a Div in CSS

There are many CSS properties to align the text vertically. Here are some of the best methods that you can use to vertically align the text.

Method 1: Using Flexbox Layout

You can use this layout to align the text because it is the modern and most recommended method. The justify-content and align-items are used to align the text.

Example:

Output:

Explanation: In this code the display: flex is used to create the flexbox and align-items: center is used to align the text vertically.

Method 2: Using the Grid Layout

You can use this method to get precise control over layouts. The place-items: center property is used to align the text.

Example:

Output:

Explanation: In this code, the display: grid enables the layout, and place-items: center is used to align the text vertically.

Method 3: Using line-height Property

You can use the line-height property if your text is of a single line. The line-height property controls the height of the space that holds your text.

Example:

Output:

Explanation: Setting line-height: 200px make your text block the same height as the container and align it properly. But this only works for single-line text, not multiple lines.

Method 4: Using table display

In this method, properties like display: table and display: table-cell are used to align the text vertically.

Example:

Output:

Explanation: When you use display: table, your div acts like a table. Adding display: table-cell gives it table-cell features, and vertical-align: middle aligns the text vertically.

Method 5: Using absolute position Property

You position the text absolutely inside the container and then use transform to align it perfectly.

Example:

Output:

Explanation: You can use position: absolute to place the text inside the div. The transform: translate(-50%, -50%) aligns the text.

Conclusion

You can use the CSS properties to vertically align the text. The Flex-box and Grid layout align the text and distribute the space between them equally, and the line-height property is used to align vertically the single-line text. The above-discussed methods are the most efficient way to vertically align the text.

FAQs