How to vertically center the grid container?

Question

I keep trying to center my grid container (main) vertically but won't move. Tried with align-items and still won't move. Can anyone help me, please?

HTML:

<body>
<main>
  <img
    src="images/image-qr-code.png"
    width="250px"
    height="auto"
    alt="Photo of QR Code"
  />
  <h1>Improve your front-end skills by building projects</h1>
  <p>
    Scan the QR code to visit Frontend Mentor and take your coding skills to
    the next level
  </p>
</main>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 1440px;
  height: 900px;
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
}

main {
  display: grid;
  grid-template-columns: 250px;
  background-color: white;
  border-radius: 10px;
  width: 300px;
  height: 500px;
  justify-content: center;
  margin: auto;
}

score -1 · Answer 1 · answered Oct 21 '22 at 08:53

-1

Set the width on main and not on the body, that should sort it out.

answered Oct 21 '22 at 08:53

damycode

23
1
8

I did try this but no results.. – cdr-in Oct 21 '22 at 08:55
@cdr-in works on my side: https://codepen.io/damyco/pen/eYrqZaE – damycode Oct 21 '22 at 08:57
I want it to look kind of like this: https://codepen.io/zzcdr/pen/vYjoKBM ; so with top and bottom margins – cdr-in Oct 21 '22 at 09:05
Ahh so you wanted to center the whole thing in the middle of the screen. Yeah you got it right! Using flex to center stuff in this way is very common. – damycode Oct 21 '22 at 09:10

score -1 · Answer 2 · answered Oct 21 '22 at 08:53

I actually found an answer. For those in need, I created an for the entire grid, wrapped by . After that, I set the position on fixed, and display on flex:

main {
  position: fixed;
  width: 100%;
  height: 100%;

  display: flex;
}

article {
  display: grid;
  grid-template-columns: 250px;
  background-color: white;
  border-radius: 10px;
  width: 300px;
  height: 500px;
  justify-content: center;
  margin: auto;
}

How to vertically center the grid container?

2 Answers2