Center a grid container vertically and horizontally

Question

Surprisingly, I can't find anything about this online. Maybe I've missed something. How do you horizontally and vertically center your entire main wrapper with CSS Grid, and obviously, maintain responsiveness?

.wrapper {
  display: grid;
  grid-template-columns: minmax(100vw, 1fr);
  grid-template-rows: minmax(100vh, 1fr);
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

Using the CSS above, the div is centered vertically, but not horizontally.

The following CSS centers the div horizontally, but not vertically:

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

Michael Benjamin · Accepted Answer · 2017-09-28T16:13:39.133

Instead of justify-content: center use justify-items: center.

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center; /* adjusted */
}

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

In your second example, you say:

The following CSS centers the div horizontally but not vertically.

That's because the container has no extra height. The row is the height of the content. Instead of grid-template-rows: 1fr try something like grid-template-rows: 100vh.

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

body {
  margin: 0;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

More here:

score 5 · Answer 2 · answered Nov 17 '21 at 11:26

Instead of using

  align-items: center;
  justify-items: center;

you can use

  place-items: center;

.wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh;
        place-items: center;
        border: 2px solid;
       }

<div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

Eric Hulsinga · Answer 3 · 2021-05-20T09:46:32.030

Example for 4 items in a 2x2 grid.

If you want to make your items smaller within the outer container; change width: 100% to whatever you like and add margin-top: and margin-left: in your CSS (for example: width: 70%, margin-top: 15%, margin-left: 15%. Margins being half of your left-over space, to keep things centered)

#wrapper {
  position: absolute; 
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

score 0 · Answer 4 · edited May 01 '23 at 18:29

0

Only add margin auto in class "wrapper", like margin: 0 auto;

With this, you center your container (wrapper) with respect to its direct parent, usually "body"

Hope it helps.

edited May 01 '23 at 18:29

Wongjn

8,544
2
8
24

answered Apr 30 '23 at 12:22

Andres Bonilla

1
1

score -3 · Answer 5 · answered Sep 28 '17 at 12:40

-3

it's better if you do

.wrapper {
  display: flex;
  flex-direction: row; // Not really necassary though
  justify-content: center; // Or you could use "space-around"
  align-items: center;
}

answered Sep 28 '17 at 12:40

Bami

23
7

score -7 · Answer 6 · answered Sep 28 '17 at 16:36

I suggest you use flex-box, it is a new layout mode in CSS3.

In this case we just give .maingrid display: flex, a height and center the content.

Then let .centerthis align itself to the middle of his father element like below.

Hope it help,

.maingrid {
  display: flex;
  height: 100px;
  justify-content: center;
}

.centerthis {
  align-self: center;
}

<div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

Center a grid container vertically and horizontally

6 Answers6