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.


<div class="card">
    center me


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

3Demo -