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">

Only this much is requied for testing


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

    height: 50%;
    background: red;



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