How To Vertically Center Text In Div Css

by

Vertically centering text within a <div> element can be a bit tricky, but with a few CSS techniques, you will be able to achieve this easily. In this blog post, we will explore three methods to vertically center text in a div using CSS properties: flexbox, grid, and transform.

Method 1: Flexbox

The first method uses the CSS flexbox layout. Flexbox makes it very easy to center content both vertically and horizontally. To center text vertically, follow these steps:

  1. Create a <div> element and add some text content to it.
  2. Apply the following CSS rules to the div:
div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* or any desired height */
}





The display: flex; rule changes the div to a flex container. The justify-content: center; rule horizontally centers the text, and the align-items: center; rule vertically centers the text. Remember to set a height for your div to see the vertical centering effect.


Method 2: Grid


The second method uses the CSS grid layout. Grid layout also makes it very easy to center content both vertically and horizontally. To center text vertically, follow these steps:


    

  1. Create a <div> element and add some text content to it.
    2. 

  2. Apply the following CSS rules to the div:
    3. 



div {
    display: grid;
    justify-content: center;
    align-content: center;
    height: 100px; /* or any desired height */
}





The display: grid; rule changes the div to a grid container. The justify-content: center; rule horizontally centers the text, and the align-content: center; rule vertically centers the text. Remember to set a height for your div to see the vertical centering effect.


Method 3: Transform


The third method uses the CSS transform property. This method works with any display type, not just flex or grid. To center text vertically, follow these steps:


    

  1. Create a <div> element and add some text content to it.
    2. 

  2. Apply the following CSS rules to the div:
    3. 



div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 100px; /* or any desired height */
}





The position: relative; rule positions the div relative to its normal position. The top: 50%; rule moves the div down 50% of its container’s height. The transform: translateY(-50%); rule moves the div up 50% of its own height. This combination results in the text being vertically centered. Remember to set a height for your div to see the vertical centering effect.


Conclusion


In this blog post, we have learned three different methods to vertically center text in a div using CSS: flexbox, grid, and transform. Each method has its own advantages, so choose the one that best suits your needs. Happy centering!