3 ways to center a div in css

In this article, I will tell you the ways I have used to center a div. Using CSS, you can center text in a div in multiple ways. Here we will learn the 3 ways to center a div. The first is by using position property, the second by using flex, and the third by using a grid. Firstly set up your HTML page with the div tag and h1 tag as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lalitha</title>
</head>
<body>
    <div>
        <h1>Center a div</h1>
    </div>
    <script src="index.js"></script>
</body>
</html>

Then the output looks like this Now set the style sheet as style.css and link it to the HTML page as shown below

body{
 text-align:center;
}
div{
color:black;
}

The HTML looks like below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet"href="style.css"/>
    <title>Lalitha</title>
</head>
<body>
    <div>
        <h1>Center a div</h1>
    </div>
    <script src="index.js"></script>
</body>
</html>

Using transform property

Here we can center a div by using top and left and also transform property. Let's see how can we do that. Firstly I am writing text-align to center and also height and body set to 100% in the body tag.

body{
text-align:center;
height:100%;
width:100%;
}

and we will add some properties in div, I am adding the top to 50%, left also to 50%, transform, and position to absolute. Let us see how can we do that. I have given the background color green and the color white. First of all, let us add background color and color.

div{
   background-color:green;
   color: white; 
}

Now we will give the top and left property to 50% as shown below

div{
   background-color:green;
   color: white; 
   top:50%;
   left:50%;
}

Now add the transform property as below

div{
   background-color:green;
   color: white; 
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

Now add the property of position to absolute.

div{
   background-color:green;
   color: white; 
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   position:absolute;
}

The output looks like this as shown below Yay! We have centered the div.

Using flex

We can also center a div by using flex property. I am setting again my background color to green and the color to white in the div tag. Let's see that below.

div{
   background-color:green;
   color: white;
}

In the body, I am going to add flex property, justify content to the center, and align items to center

body{
text-align:center;
justify-content:center;
align-items:center;
}

Now we will add display property to flex

body{
text-align:center;
justify-content:center;
align-items:center;
display:flex;
}

And let us set the height and width

body{
text-align:center;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
width:100%;
}

The output looks like this as below

Using grid

Now we can also center a div by using a grid property. Just remove the flex and add the grid property in the body tag. Let us add the grid to the body now.

body{
text-align:center;
height:100vh;
width:100%;
display:grid;
justify-content:center;
align-items:center;
}

The div tag looks like the below.

div{
   background-color:green;
   color: white;
}

We have centered the div using grid property. The output looks like the below one. Here are the three ways to center a div using transform property, grid, and flex. Thanks for reading. Happy coding!

3 ways to center a div in css

Table of contents

Using transform property

Using flex

Using grid