Center a
Using CSS Grid Property

To center a div using CSS grid property, we will be using CSS grid layout and it's properties. CSS grid is one of the most widely used elements in CSS which is similar to flexbox. CSS grids are two-dimensional layout systems on the web. We can place the elements in rows, columns, or both with the help of a grid.

In this article, we shall understand how to center a div using the CSS grid property only. We will be using three approaches for this.

Approaches To center a div using CSS grid Property

Center div using place-items Property

In this approach, to center a div using CSS grid property, We have used "place-items: center;" which centers the div. It can be considered as a shorthand property for align-items and justify-content property.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS place-items property.

<html>
<head>
    <title>
        Center a div using CSS properties
    </title>
    <style>
        .container {                      
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .item {
            border: 2px solid green;
            padding: 10px;width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
        }
    </style>
</head>
<body>
    <h3>
        Center item using grid properties.
    </h3>
    <p>
        We have used CSS <strong>place-items
        </strong> property to center the div.
    </p>
    <div class="container">
        <p class="item"></p>
    </div>
</body>
</html>

Center div using grid-row and grid-column Property

We have Used grid-row and grid-column property which centers the div. We have used following steps to center a div:

  • We have used "grid-template-rows" and "grid-template-columns" which defines three rows and three columns where first and third rows and columns take a fraction of available space and second row and column is set to auto.
  • We have used "grid-row: 2;" which places the div in the second row of the grid.
  • We have used "grid-column: 2;" which places the div in the second column of the grid.
  • We have used background-color, border, height and width properties to style the div element.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS grid-row and grid-column property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Center Div with CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 1fr auto 1fr;
            grid-template-columns: 1fr auto 1fr;
            height: 100vh;
        }
        .item {
            grid-row: 2;
            grid-column: 2;
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <h3>
        Center Item Using grid Property.
    </h3>
    <p>
        We have used CSS <strong> grid-row
        </strong> and <strong>grid-column
        </strong> property to center the div.
    </p>
    <div class="container">
        <p class="item"></p>
    </div>
</body>
</html>

Center div using place-self Property

In this approach, we have used place-self property which centers the div both horizontally and vertically. It can be used as shorthand property for align-self and justify-self properties.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS place-self property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Center div using place-self
    </title>
    <style>
        .container {
            display: grid;
            height: 100vh;
        }
        .item {
            place-self: center;
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <h3>
        Center Item Using grid Property.
    </h3>
    <p>
        We have used CSS <strong>place-self
        </strong> property to center the div.
    </p>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

Conclusion

To center a div using CSS is an important task and very simple process which can be imlemented using various CSS properties. In this article, we have used CSS grid layout to center a div using three different approaches which are using place-items property, grid-row and grid-column property and place-self property.

Updated on: 2024-08-09T09:52:15+05:30

19K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements