Centrado en CSS Grid

Estoy tratando de crear una página simple con CSS Grid.

Lo que no puedo hacer es centrar el texto del HTML en las celdas de la cuadrícula respectiva.

He intentado contenido puesta en distintos divs tanto dentro como fuera de la left_bgy right_bgselectores de juego y con algunas de las propiedades CSS en vano.

¿Cómo hago esto?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Esta respuesta tiene dos secciones principales:

1. Comprender cómo funciona la alineación en CSS Grid.
2. Seis métodos para centrarse en CSS Grid.

Si solo está interesado en las soluciones, omita la primera sección.

La estructura y el alcance del diseño de cuadrícula

Para comprender completamente cómo funciona el centrado en un contenedor de cuadrícula, es importante comprender primero la estructura y el alcance del diseño de la cuadrícula.

La estructura HTML de un contenedor de cuadrícula tiene tres niveles:

• El contenedor
• el objeto
• el contenido

Cada uno de estos niveles es independiente de los demás, en términos de aplicación de propiedades de cuadrícula.

El alcance de un contenedor de cuadrícula se limita a una relación padre-hijo.

Esto significa que un contenedor de cuadrícula es siempre el elemento primario y un elemento de cuadrícula es siempre el elemento secundario. Las propiedades de cuadrícula solo funcionan dentro de esta relación.

Los descendientes de un contenedor de cuadrícula más allá de los elementos secundarios no forman parte del diseño de cuadrícula y no aceptarán propiedades de cuadrícula. (Al menos no hasta que subgridse haya implementado la característica, lo que permitirá a los descendientes de los elementos de la cuadrícula respetar las líneas del contenedor primario).

Aquí hay un ejemplo de los conceptos de estructura y alcance descritos anteriormente.

Imagine una cuadrícula de tres en raya.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

Desea que las X y O estén centradas en cada celda.

Entonces aplica el centrado a nivel de contenedor:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

Pero debido a la estructura y el alcance del diseño de la cuadrícula, justify-itemsen el contenedor se centran los elementos de la cuadrícula, no el contenido (al menos no directamente).

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Mismo problema con align-items: El contenido puede estar centrado como un subproducto, pero ha perdido el diseño del diseño.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Para centrar el contenido, debe adoptar un enfoque diferente. Refiriéndose nuevamente a la estructura y el alcance del diseño de la cuadrícula, debe tratar el elemento de la cuadrícula como principal y el contenido como secundario.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFiddle demo

Seis métodos para centrar en la cuadrícula CSS

Existen varios métodos para centrar elementos de cuadrícula y su contenido.

Aquí hay una grilla básica de 2x2:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Flexbox

Para una forma simple y fácil de centrar el contenido de los elementos de la cuadrícula, use flexbox.

Más específicamente, convierta el elemento de la cuadrícula en un contenedor flexible.

No hay conflicto, violación de especificaciones u otro problema con este método. Es limpio y válido.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Vea esta publicación para una explicación completa:

• Cómo centrar elementos vertical y horizontalmente en Flexbox

Diseño de cuadrícula

De la misma manera que un elemento flexible también puede ser un contenedor flexible, un elemento de cuadrícula también puede ser un contenedor de cuadrícula. Esta solución es similar a la solución flexbox anterior, excepto que el centrado se realiza con propiedades de cuadrícula, no flex.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

auto márgenes

Úselo margin: autopara centrar vertical y horizontalmente los elementos de la cuadrícula.

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Para centrar el contenido de los elementos de la cuadrícula, debe convertir el elemento en un contenedor de cuadrícula (o flex), envolver los elementos anónimos en sus propios elementos ( ya que CSS no puede orientarlos directamente ) y aplicar los márgenes a los nuevos elementos.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Propiedades de alineación de caja

Cuando considere usar las siguientes propiedades para alinear los elementos de la cuadrícula, lea la sección sobre automárgenes de arriba.

• align-items
• justify-items
• align-self
• justify-self

https://www.w3.org/TR/css-align-3/#property-index

text-align: center

Para centrar el contenido horizontalmente en un elemento de cuadrícula, puede usar la text-alignpropiedad.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Tenga en cuenta que para el centrado vertical, vertical-align: middleno funcionará.

Esto se debe a que la vertical-alignpropiedad solo se aplica a los contenedores en línea y de celda de tabla.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Se podría decir que display: inline-gridestablece un contenedor de nivel en línea, y eso sería cierto. Entonces, ¿por qué no vertical-alignfunciona en elementos de cuadrícula?

La razón es que en un contexto de formato de cuadrícula , los elementos se tratan como elementos a nivel de bloque.

6.1. Visualización de elementos de cuadrícula

El displayvalor de un elemento de cuadrícula está bloqueado : si el valor especificado displayde un elemento secundario en flujo de un elemento que genera un contenedor de cuadrícula es un valor de nivel en línea, se calcula a su equivalente de nivel de bloque.

En un contexto de formato de bloque , algo para lo que la vertical-alignpropiedad fue diseñada originalmente, el navegador no espera encontrar un elemento de nivel de bloque en un contenedor de nivel en línea. Eso es HTML inválido.

Posicionamiento CSS

Por último, hay una solución de centrado de CSS general que también funciona en Grid: posicionamiento absoluto

Este es un buen método para centrar objetos que deben eliminarse del flujo de documentos. Por ejemplo, si quieres:

• Centrar texto sobre una imagen , o
• Coloque asteriscos (*) sobre los campos de formulario requeridos

Simplemente establezca position: absoluteel elemento que se va a centrar y position: relativeel antepasado que servirá como bloque de contención (generalmente es el padre). Algo como esto:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Aquí hay una explicación completa de cómo funciona este método:

• El elemento no permanecerá centrado, especialmente al cambiar el tamaño de la pantalla

Aquí está la sección sobre posicionamiento absoluto en la especificación de cuadrícula:

• https://www.w3.org/TR/css3-grid-layout/#abspos

Puede usar flexbox para centrar su texto. Por cierto, no se necesitan contenedores adicionales porque el texto se considera un elemento flexible anónimo.

De las especificaciones de flexbox :

Cada elemento secundario en flujo de un contenedor flexible se convierte en un elemento flexible , y cada corrida contigua de texto que está contenida directamente dentro de un contenedor flexible se envuelve en un elemento flexible anónimo . Sin embargo, no se representa un elemento flexible anónimo que contiene solo espacios en blanco (es decir, caracteres que pueden verse afectados por la white-spacepropiedad) (como si lo fuera display:none).

Así que solo haga elementos de cuadrícula como contenedores flexibles ( display: flex), y agregue align-items: centery justify-content: centercentre tanto vertical como horizontalmente.

También se realizó la optimización de HTML y CSS:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Ni siquiera intentes usar flex; quédate con css grid !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

está haciendo el trabajo de centrado aquí.

Si desea centrar algo que está dentro divque está dentro de la celda de la cuadrícula, debe definir la cuadrícula anidada para que funcione. (Mire el violín de los dos ejemplos que se muestran allí).

https://css-tricks.com/snippets/css/complete-guide-grid/

¡Salud!

La propiedad abreviada CSS place-items establece las propiedades align-items y justify-items, respectivamente. Si el segundo valor no está configurado, el primer valor también se usa para ello.

.parent {
  display: grid;
  place-items: center;
}

Intenta usar flex:

Demostración de Plunker: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

¿Tu quieres esto?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Sé que esta pregunta tiene un par de años, pero me sorprende descubrir que nadie sugirió:

   text-align: center;

esta es una propiedad más universal que justify-content, y definitivamente no es exclusiva de la cuadrícula, pero encuentro que cuando se trata de texto, que es lo que esta pregunta específicamente pregunta, alinea el texto al centro sin afectar el espacio entre elementos de la cuadrícula o el centrado vertical. Centra el texto horizontalmente donde se encuentra en su eje vertical. También encuentro que elimina una capa de complejidad que justifica el contenido y alinea los elementos agregados. justify-content y align-items afecta a todo el elemento o elementos de la cuadrícula, text-align centra el texto sin afectar el contenedor en el que se encuentra. Espero que esto ayude.