How to Center Text Vertically and Horizontally in 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:

.container {
    background: cornflowerblue;
    width: 250px;
    height: 250px;
    text-align: center;
    line-height: 250px;
}

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

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

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:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

• justify-content centers it on the horizontal axis
• align-items centers it along the vertical axis

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

• The line-height property in CSS