Top 3 Best Ways to Center a Div with Simple CSS

Category : Programming Posted on July 27 2022 At 12:14 pm
Whatsapp    Facebook     Twitter    Linkedin   

Hello Readers, Sometimes a face a lot of issue in a very simple work of Centreing a Div using CSS. In this post we will cover top 3 ways of centring a div with CSS, Kindly we are not going to use any advance CSS.

1) First Way : We are going to use CSS position property which is the most common way to centre a div in CSS.

<div class="center">
.center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

2) Second Way : Now we are going to the flex box pattern to centre a Div, bootstrap uses flexbox pattern to centre Div.

<div class="flex"><div class="center"></div</div>
.flex{display: flex; align-items: center; justify-content: center;}
.center{background-color: black; width: 250px; height: 250px;}

3) Third Way : At last we are going to use the grid layout pattern to center the div, grid system is easy to use.

<div class="grid"><div class="center"></div</div>
.grid{display: grid; place-items: center;}
.center{background-color: black; width: 250px; height: 250px;}

I hope you liked my post, if yes please do share this to your network using the link below 


Whatsapp    Facebook     Twitter    Linkedin   
Leave a Comment: