Center alignment without the need for height

Question

Seen a few tutorials and doc now. Where its claimed,
all you need to do is the following to both horizontally and vertically align a div.

.grid {
    display: grid;
    place-items: center;
}

But is not true from what I see. It aligns horizontally but not vertically.

For it to align it vertically, you need to add height.

.grid {
    display: grid;
    place-items: center;
    height: 500px;
}

But this is not being dynamic for it to always stay center for any height. height: 100% doesn't work.
Am I doing something wrong, or the docs / tutorials are incorrect?

Trying this on Edge browser if it matters.

<!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        .grid {
            display: grid;
            place-items: center;
        }
    </style>
    <body>
        <article class="grid">
            <div>
                
            </div>
        </article>
    </body>
</html>

Doc and tutorial references:

https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

https://www.youtube.com/shorts/njdJeu95p6s

https://youtu.be/qm0IfG1GyZU?t=128

Rok Benko · Accepted Answer · 2022-12-15T12:21:10.810

1

The problem is that you haven't set height to the parent element.

You can use height: 100%;, but then you also need to set height to the parent element (i.e., <body> in your case).

See the snippet below.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  
  body {
    height: 100vh;
  }
  
  .grid {
    display: grid;
    place-items: center;
    height: 100%;
    border: 5px solid red;
  }
</style>

<body>
  <article class="grid">
    <div>
      
    </div>
  </article>
</body>

</html>

edited Dec 15 '22 at 12:21

answered Dec 15 '22 at 11:46

Rok Benko

14,265
2
24
49

Thanks. That does work. But still involves the need to mention height which is not addressed in the docs nor tutorials. – JasSy Dec 15 '22 at 11:55
1

If you take a look at [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items), you can see that there's always `height` set (using [`display: flex;`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items#placing_items_in_a_flex_container) or [`display: grid;`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items#placing_items_in_a_grid_container)). – Rok Benko Dec 15 '22 at 12:08

score 0 · Answer 2 · answered Dec 15 '22 at 11:58

You may like to look up the way that width is treated in a block element.

e.g. in MDN

Note: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

which is why your emoji centers horizontally.

The height is just the height of the content which is the emoji.

If you are trying to center the emoji in the middle of the viewport then give the element the height of the viewport. If you are trying to center it in its parent (which currently is the body element) then give it the height of the parent (height: 100%).

This snippet assumes you want it centered in the viewport:

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  
  .grid {
    display: grid;
    height: 100vh;
    place-items: center;
  }
</style>

<body>
  <article class="grid">
    <div>
      
    </div>
  </article>
</body>

</html>

score 0 · Answer 3 · answered Dec 15 '22 at 11:58

0

Usually if you set margin: auto; for that element it gets centered in the parent element. But it should not be overwritten by other positioning attributes, so I suggest you try doing this solution to see if it works

answered Dec 15 '22 at 11:58

rumteen farivar

1
1
1
7

score 0 · Answer 4 · answered Dec 15 '22 at 12:42

You can not vertically in a section as the section by default does not have any extra height in it.

In the below code, you can see that if we apply height to the .height class then the section gets height.

you can use 100vh or 100% or some height in pixels

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
}

.grid {
  display: grid;
  background: #21977c69;
  place-items: center;
}

.grid>div {
  background: #fa977c69
}

.height {
  height: 100%;
}

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <article class="grid">
    <div>
      
    </div>
  </article>
  <article class="grid height">
    <div>
      this is a grid with a height
    </div>
  </article>
</body>

</html>

Center alignment without the need for height

4 Answers4