How To Center a Div Using CSS Grid?

To center a <div> using CSS Grid, you can use a combination of grid container properties to place the <div> at the center of its parent container. The easiest way to achieve this is by setting the parent element to use display: grid and then using properties like place-items or a combination of justify-content and align-content to center the child <div>.

Using place-items Property

The place-items property is a shorthand for setting both align-items and justify-items in one line. It can be used to center items in both directions easily.

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px;
    gap: 10px;
    place-items: center;
    /* Centers items horizontally and vertically */
    background-color: #f0f4f8;
    height: 100vh;
}

.grid-item {
    background-color: #d1e8e2;
    padding: 20px;
    border-radius: 5px;
    font-size: 18px;
}

Output

Alternative Approaches to Center a Div

Using justify-content and align-content

You can also center a <div> using a combination of justify-content and align-content set to center on the grid container.

<style>
    .container {
        display: grid;
          /* Centers horizontally */
        justify-content: center;
       /* Centers vertically */
        align-content: center;
        height: 100vh;
    }

    .centered-div {
        background-color: #d1e8e2;
        padding: 20px;
    }
</style>
<div class="container">
    <div class="centered-div">I am centered!</div>
</div>

Output

Using Grid Lines

Another approach is to use grid lines to explicitly place the <div> in the center by setting the grid template areas and positioning the <div> accordingly.

<div class="container">
    <div class="left-item">Left Item</div>
    <div class="center-item">Center Item</div>
    <div class="right-item">Right Item</div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: 100vh;
    align-items: center;
}

.left-item {
    grid-column: 1;
    /* Align to the left */
    justify-self: start;
    background-color: lightcoral;
    padding: 20px;
    border: 2px solid red;
}

.center-item {
    grid-column: 2;
    /* Center horizontally */
    justify-self: center;
    background-color: lightgreen;
    padding: 20px;
    border: 2px solid green;
}

.right-item {
    grid-column: 3;
    /* Align to the right */
    justify-self: end;
    background-color: lightblue;
    padding: 20px;
    border: 2px solid blue;
}

Output

Which Approach Is Better in Different Cases?

• Using place-items: center: This is the simplest and most efficient way when you need to center a single item both horizontally and vertically. It's ideal for most cases.
• Using justify-content and align-content: These properties offer more flexibility if you need to align multiple items or customize alignment differently on each axis.
• Using Grid Lines: This approach gives you explicit control over grid placement, making it suitable for complex layouts where specific grid line positioning is necessary.