Skip to content
Related Articles

Related Articles

Improve Article

How to center a <div> using CSS grid Property ?

  • Last Updated : 01 Jul, 2021

In this article, we will learn to center an HTML <div> element using the grid property of CSS.

To center the <div> element horizontally using grid. Use the property of display set to grid i.e. display: grid; Then use property place-items: center;

Example: The following example demonstrates to set the <div> to the center using grid property.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        .grid{
            display: grid;
            place-items:  center;
            color: green;
            font-size: 25px;
            height : 500px;
        }
    </style>
</head>
<body>
    <div class="grid">
      <p>Geeks for Geeks</p>
    </div>
</body>
</html>

Output:

centre div using height 

Example 2: We will demonstrate an example where we are not setting the height for the <div>. The result will be at the center but only in the x-axis direction whereas by setting height we can center <div> on both axis.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
      
    <style>
        .grid{
            display: grid;
            place-items:  center;
            color: green;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="grid">
      <p>Geeks for Geeks</p>
    </div>
</body>
</html>

Output:

center on x axis 




My Personal Notes arrow_drop_up
Recommended Articles
Page :