How to center a <div> using CSS grid Property ?
Last Updated :
28 Feb, 2024
In this article, we will learn to center an HTML <div> element using the CSS grid property. We can center any element using the below-mentioned approaches. Here we will learn to center a div in 5 different ways.
Before centering a div using the grid property we will need to create a container where we will keep a div that will be center aligned horizontally and vertically. We have given a border to the div so the centering of that div can be visible. Set the main container width to 100% so the div can be moved around into that container.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
}
div {
border: 2px solid black;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
We will be using CSS grid property in all of our examples. This property will be applied to the container(Parent element), then we will use different approaches to center the div element(Child Element).
.container{
display: grid;
}
Centering div with CSS Grid and place-self Property
Here in this approach we will use the shorthand porperty of justify-self and align-self property which is place-self property.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
display: grid;
}
div {
border: 2px solid black;
place-self: center;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
Output:
Centering div with CSS Grid and place-self Output
Explanation: Using place-self property with grid to center a div has advanatge, the place-self property let the other gird items freely placed. In this approach you can see that the div is center horizontally as well as vertically.
Centering div with CSS Grid and place-items Property
Here in this approach we will use the shorthand porperty of justify-items and align-items property which is place-items property.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}
div {
border: 2px solid black;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
Output:
Centering div with CSS Grid and place-items Output
Explanation: The place-item property used on the container elemenet(Parent), becouse of that if we add more divs in that container all the divs will be center aligned.
Centering div with CSS Grid and place-content Property
Cntering a div using place-content property give an uperhand advantage, like in the previuse examples you have seen the usage of place-self and place-items which allow grid items to placed within its designated grid cell. But the place-content property specify how the entire content of the grid container should be aligned, and it is shorthand for justify-content and align-content.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
display: grid;
place-content: center;
}
div {
border: 2px solid black;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
Output:
Centering div with CSS Grid and place-content Output
Explanation: CSS place-content property has multiple values but if we are centering a single div then we can use space-around and space-evenly to center the single div as well.
Centering div with CSS Grid and Auto Margin Property
By using margin property’s auto with grid property can place the div into center place. This approach let the browser calculate the available space and place the div in the center horizontlly and vertically.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
display: grid;
}
div {
border: 2px solid black;
margin: auto;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
Output:
Centering a div with CSS Grid and Auto Margin Output
Explanation: In this example we utilized the browser capability by using the CSS margin property, we set the margin value to auto so the browser can adjust with the available space and place the div into the center of the viewport.
Centering div with Grid Areas
This approach required complete understanding of CSS Grid property, we will need grid-tmplate-column and grid-template-rows property to set the div length. To place the grid we will required grid-column and grid-row property.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Centering DIV Element using Grid Property</title>
<style>
.container{
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
}
div {
border: 2px solid black;
grid-column: 2;
grid-row: 2;
}
</style>
</head>
<body>
<article class="container">
<div>
<h2>GeeksforGeeks</h2>
<p>A Learning Platform</p>
</div>
</article>
</body>
</html>
|
Output:
Centering div with Grid Areas Output
Explanation: Here in this example we used fr unit that indicated the leftover space, we highly recommend to avoid this approach for learning purpose but in real world this approach is beneficial over other approaches.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...