垂直和水平居中网格容器

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>

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

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

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>