Centrer un conteneur de grille verticalement et horizontalement

Question

Étonnamment, je ne trouve rien à ce sujet en ligne. J'ai peut-être raté quelque chose. Comment centrez-vous horizontalement et verticalement l'intégralité de votre wrapper principal avec CSS Grid et, évidemment, conservez-vous la réactivité?

.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>

En utilisant le CSS ci-dessus, le div est centré verticalement, mais pas horizontalement.

Le CSS suivant centre la div horizontalement, mais pas verticalement:

.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

Au lieu de justify-content: center utilisation 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>

Dans votre deuxième exemple, vous dites:

Le CSS suivant centre la div horizontalement mais pas verticalement.

C'est parce que le conteneur n'a pas de hauteur supplémentaire. La ligne est la hauteur du contenu. Au lieu de grid-template-rows: 1fr essayez quelque chose comme 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>

Plus ici:

• Quelle est la différence entre align-items et align-content dans Grid Layout?
• Centrage dans la grille CSS