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>

Stanfill

Answer 1

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:

• What is the difference between align-items vs. align-content in Grid Layout?
• Centering in CSS Grid

Reidreidar

Answer 2

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>

Lampoon

Answer 3

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>

Carmen

Answer 4

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.

Prurigo

Answer 5

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;
}

Teodora

Answer 6

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>

Shaunshauna