πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Center Text Vertically and Horizontally in CSS

How to Center Text Vertically and Horizontally in CSS

Ferenc Almasi β€’ 2020 November 30 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

We can align text in the center by simply setting text-align to center. But how do you align it vertically? Simply set line-height to the container’s height and you are done:

Copied to clipboard! Playground
.container {
    background: cornflowerblue;
    width: 250px;
    height: 250px;
    text-align: center;
    line-height: 250px;
}
center.css

In the example above, the height of the container is set to 250px so the line-height should be 250px as well.


The Modern Solution

If you want to go with a modern and shorter solution, you can also use flexbox, with justify-content and align-items:

Copied to clipboard! Playground
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
center.css
  • justify-content centers it on the horizontal axis
  • align-items centers it along the vertical axis
Center text vertically and horizontally in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.