Vertically and horizontally centre content inside a div

Created On: 22/03/2022

To make content verically and horizontally center to a div, we can use the flexbox CSS property.

The html code is below.

Copy
<div class="container">
    Hi
</div>

The css code is below.

Copy
.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

Here we are creating a div with class "container". The container class is setting height and width to 200px.

For the ease of understanding we have added border around the conatiner div.

These three lines below are doing the actual magic.

Copy
display: flex;
justify-content: center;
align-items: center;

Watch this quick video.