How to align content vertically and horizontally CSS/HTML

One of the ways to align content is to use flex.
To learn how to align the content we need to create html with content:

<div class="flexbox">
    <div class="flex-content">flex-content</div>
</div>

End add some initial css properties:

.flexbox {
     width:500px;
     height:200px;
     background: #8ba4f9;
}

The .flexbox class must be defined as a block flex container, for this we will write the following properties:

.flexbox {
    display: flex;
}

To align the content vertically, we should set the .flexbox class to the align-items property, with the value center:

.flexbox {
   align-items: center;
}

To align the content horizontally, set the .flexbox class to justify-content , with the value center:

.flexbox {
    justify-content: center;
}

Therefore, in order to align content vertically and horizontally using flex, you need to write these properties:

.flexbox {
    width:500px;
    height:200px;
    background: #8ba4f9;
    display: flex;
    align-items: center;/* vertical alignment of content */
    justify-content: center;/* content horizontal alignment */
}

See the Pen Align content vertically and horizontally with flex by Comfort Dev (@comfortdev) on CodePen.