Anjan Dutta

Vertically and horizontally centre content inside a div

Vertically and horizontally centre content inside a div

Created On: 16/09/2021

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

The html code is below.

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

The css code is below.

.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}