Center text horizontally and vertically inside a div

For chive this problem we will use flex here.

HTML Code

<div class="container">
    Centralize Text
</div>

CSS Code

.container {
    /* Set Height and Width border */
    width: 200px;
    height: 200px;
    border: 3px solid maroon;

    /* Set Text Properties */
    font-size: 20px;
    font-weight: bold;

    /* Centering the text using flex */
    display: flex;
    justify-content: center;
    align-items: center;
}

Output

Center text horizontally and vertically inside a div
Share