Center text horizontally and vertically using CSS flexbox

center text horizontally and vertically using flexbox - CSS

To center text inside a div we'll use two properties of flexbox! the first one is justify-content which handle the horizontally alignments and the second one is align-items which handle the vertically alignments.

1HTML

<div class="card">
    center me
</div>

2CSS

body, html{
    padding: 0;
    margin: 0;
}
.card{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    /*Center*/
    align-items: center;
    justify-content: center;
    background-color: red;
}

3Demo -