How to center a div with CSS Grid
Center any HTML element horizontally and vertically using the modern CSS Grid Layout. Use the `place-items` shorthand to apply both axis alignments in a single line of code.
You will learn how to center a div element both horizontally and vertically using the modern CSS Grid Layout. These steps apply to any HTML5 project running on modern browsers that support the CSS Grid specification. You will use the `place-items` shorthand property to apply both axis alignments in a single line of code.
Prerequisites
- A code editor like VS Code or Sublime Text.
- A local web server or a static file server to serve HTML files.
- A browser that supports CSS Grid (Chrome, Firefox, Safari, Edge).
- Basic knowledge of HTML document structure.
Step 1: Create an HTML file with a container and a child element
Create a new file named `index.html`. Add a standard HTML5 boilerplate. Inside the `` tag, create a `` with the class `container` that will act as the grid container. Inside that container, add another `` with the class `child` that you want to center.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center Div Grid</title>
<style>
body {
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.child {
background-color: #007bff;
color: white;
padding: 2rem;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
Centered Content
</div>
</div>
</body>
</html>Save the file. Open `index.html` in your browser. You will see the blue box centered perfectly in the middle of the viewport. The `display: grid` property on the container activates the grid layout engine. The `place-items: center` property sets both `justify-items` and `align-items` to `center` simultaneously.
Step 2: Center using separate justify and align properties
If you need more granular control, you can split the centering logic into two separate properties. Use `justify-items` to control horizontal alignment and `align-items` to control vertical alignment. This approach is useful when you want to center items only within their own grid area, not the whole container.
.container {
display: grid;
justify-items: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
width: 80%;
height: 80%;
margin: auto;
}Update your CSS file or the `` block in the HTML. Reload the page. The result is identical to using `place-items`, but the code is more explicit about which axis is being affected. This separation helps when dealing with complex layouts where different rows or columns need different alignment.
Step 3: Center using grid-template-areas
You can also center a div by defining a grid template area that forces the content into the middle. Define a grid with a specific number of rows and columns. Place the child element in the middle of that grid using `grid-column` and `grid-row` properties.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
". ."
". ."
". .";
}
.child {
grid-column: 2;
grid-row: 2;
background-color: #28a745;
color: white;
padding: 2rem;
}Create a new file or update the existing one. Save and refresh the browser. The container now has a 3x3 grid. The child div is explicitly placed in the second row and second column. This method is useful when you want to center content relative to a larger grid structure rather than just the viewport.
Step 4: Center with auto margins
While not strictly a CSS Grid feature, you can combine grid with auto margins to center a single flex item inside a grid cell. Set the child div to `display: flex` and give it `margin: auto`. This pushes the element to the center of its grid cell.
.container {
display: grid;
place-items: center;
}
.child {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
background-color: #dc3545;
color: white;
padding: 2rem;
}Save the file and open it in the browser. The red box will remain centered. This technique is useful when the grid cell itself is not the full viewport, but a specific section of a larger layout. The `margin: auto` on the child forces it to take up available space and center itself within that space.
Verify the installation
Open your browser's Developer Tools by pressing F12. Select the Elements tab. Click on the `` element. Look at the Computed tab. You will see `display: grid` and `place-items: center` listed. Inspect the rendered page. The child div should be perfectly centered horizontally and vertically. If the background of the container is a different color than the body, you will see the grid boundaries clearly.
Troubleshooting
Error: The child element is not centered.
Check that the parent container has `display: grid` set. If the parent is a flexbox or a block element, the grid properties will not apply. Ensure the child element is actually inside the grid container. If the container has `overflow: hidden`, the content might be clipped. Try removing `overflow: hidden` or increasing the container size.
Error: The element is centered but cut off.
The container might be smaller than the content. Check the `width` and `height` properties of the container. Ensure the container is large enough to hold the content. If the container is fixed size, the content will be clipped. Use `min-height: 100vh` on the body to ensure the container takes up the full screen.
Error: Alignment behaves differently in older browsers.
CSS Grid is not supported in Internet Explorer. If you are targeting IE11 or older, you must use a fallback method like Flexbox or absolute positioning. Add a media query or a class prefix for older browsers. For example, use `.ie11 .container { display: flex; justify-content: center; align-items: center; }`.
Error: Centering only works vertically or horizontally.
Verify the spelling of `place-items`. It is case-sensitive. Ensure you are using `center` and not `Centre`. Check that there are no typos in the CSS class names. If you are using `justify-items` and `align-items` separately, ensure both are set to `center`.
Error: The grid does not span the full viewport.
The body tag might have a default margin. Remove `margin: 0` from the `body` or `html` tags. If the container has a fixed width, it will not expand to fill the screen. Remove the width constraint or set it to `100%`.
Error: The child element is not a direct child of the grid.
CSS Grid aligns direct children by default. If the child is nested inside another div, the alignment properties apply to the immediate parent grid. Move the child element to be a direct child of the container or apply the alignment properties to the intermediate parent.