How to center a <div> using CSS grid Property ?
Last Updated :
23 Jul, 2025
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 OutputExplanation: 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.
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read