Centering elements using flexbox is very simple and is one of the easiest way to center stuff. It is very reliable and easy. It feel it is easier then margin:0 auto technique. So lets get into it.

HTML for testing

<div class="flex-container">
    <div class="flex-item">
    </div>
</div>

Only this much is requied for testing

CSS

.flex-container{
    display: flex;
    align-items: center; /* This will vertically center them */
    justify-content: center; /* This will horizontally center them*/
    width: 300px;
    height: 300px;
    background: blue;
}

.flex-item{
    height: 50%;
    width:50%;
    background: red;
}

Result

Conclusion

Flexbox is really powerful tool for web designers and it is now 97% supported worldwide with even even more support if you prefix it. Start using flexbox today