Centralização na Grade CSS

Estou tentando criar uma página simples com CSS Grid.

O que não estou conseguindo fazer é centralizar o texto do HTML para as respectivas células da grade.

Eu tentei conteúdo colocação em separado divs tanto dentro como fora do left_bge right_bgseletores e brincando com algumas das propriedades CSS sem sucesso.

Como eu faço isso?

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 resposta tem duas seções principais:

1. Entendendo como o alinhamento funciona na CSS Grid.
2. Seis métodos para centralizar no CSS Grid.

Se você estiver interessado apenas nas soluções, pule a primeira seção.

A estrutura e o escopo do layout de grade

Para entender completamente como a centralização funciona em um contêiner de grade, é importante primeiro entender a estrutura e o escopo do layout da grade.

A estrutura HTML de um contêiner de grade possui três níveis:

• o recipiente
• o item
• o conteúdo

Cada um desses níveis é independente dos outros, em termos de aplicação das propriedades da grade.

O escopo de um contêiner de grade é limitado a um relacionamento pai-filho.

Isso significa que um contêiner de grade é sempre o pai e um item de grade é sempre o filho. As propriedades da grade funcionam apenas dentro desse relacionamento.

Descendentes de um contêiner de grade além dos filhos não fazem parte do layout da grade e não aceitarão propriedades da grade. (Pelo menos não até que o subgridrecurso seja implementado, o que permitirá que os descendentes de itens da grade respeitem as linhas do contêiner primário.)

Aqui está um exemplo dos conceitos de estrutura e escopo descritos acima.

Imagine uma grade do tipo tic-tac-toe.

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

Você quer que os X e O estejam centralizados em cada célula.

Então você aplica a centralização no nível do contêiner:

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

Porém, devido à estrutura e ao escopo do layout da grade, justify-itemso contêiner centraliza os itens da grade, não o conteúdo (pelo menos não diretamente).

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>

Mesmo problema com align-items: o conteúdo pode ser centralizado como subproduto, mas você perdeu o design do layout.

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 centralizar o conteúdo, você precisa adotar uma abordagem diferente. Referindo-se novamente à estrutura e ao escopo do layout da grade, você precisa tratar o item da grade como pai e o conteúdo como filho.

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>

Demonstração do jsFiddle

Seis métodos para centralizar na grade CSS

Existem vários métodos para centralizar itens da grade e seu conteúdo.

Aqui está uma grade 2x2 básica:

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 uma maneira simples e fácil de centralizar o conteúdo dos itens da grade, use o flexbox.

Mais especificamente, transforme o item da grade em um contêiner flexível.

Não há conflito, violação de especificação ou outro problema com este método. É limpo e 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>

Veja este post para uma explicação completa:

• Como centralizar elementos verticalmente e horizontalmente no Flexbox

Layout da grade

Da mesma maneira que um item flexível também pode ser um contêiner flexível, um item de grade também pode ser um contêiner de grade. Essa solução é semelhante à solução flexbox acima, exceto que a centralização é feita com propriedades de grade, e não 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 margens

Use margin: autopara centralizar vertical e horizontalmente os itens da grade.

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 centralizar o conteúdo dos itens de grade, você precisa transformá-lo em um contêiner de grade (ou flex), agrupar itens anônimos em seus próprios elementos ( já que eles não podem ser direcionados diretamente pelo CSS ) e aplicar as margens aos novos 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>

Propriedades de alinhamento de caixa

Ao considerar usar as seguintes propriedades para alinhar itens da grade, leia a seção nas automargens acima.

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

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

text-align: center

Para centralizar o conteúdo horizontalmente em um item de grade, você pode usar a text-alignpropriedade

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>

Observe que, para centralização vertical, vertical-align: middlenão funcionará.

Isso ocorre porque a vertical-alignpropriedade se aplica apenas a contêineres embutidos e de célula da tabela.

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>

Pode-se dizer que display: inline-gridestabelece um contêiner em nível de linha e isso seria verdade. Então, por que não vertical-alignfunciona em itens de grade?

O motivo é que, em um contexto de formatação de grade , os itens são tratados como elementos no nível do bloco.

6.1 Exibição do item de grade

O displayvalor de um item de grade é bloqueado : se o especificado displayde um filho em fluxo de um elemento que gera um contêiner de grade for um valor em nível de linha, ele computará para seu equivalente em nível de bloco.

Em um contexto de formatação de bloco , algo para o qual a vertical-alignpropriedade foi projetada originalmente, o navegador não espera encontrar um elemento em nível de bloco em um contêiner em nível de linha. Isso é HTML inválido.

Posicionamento CSS

Por fim, existe uma solução geral de centralização CSS que também funciona no Grid: posicionamento absoluto

Este é um bom método para centralizar objetos que precisam ser removidos do fluxo de documentos. Por exemplo, se você deseja:

• Centralize o texto sobre uma imagem ou
• Coloque asteriscos (*) acima dos campos obrigatórios

Basta definir position: absoluteo elemento a ser centralizado e position: relativeo ancestral que servirá como bloco de contenção (geralmente é o pai). Algo assim:

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>

Aqui está uma explicação completa de como esse método funciona:

• O elemento não permanecerá centralizado, especialmente ao redimensionar a tela

Aqui está a seção sobre posicionamento absoluto na especificação Grid:

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

Você pode usar o flexbox para centralizar seu texto. A propósito, não há necessidade de contêineres extras, porque o texto é considerado como item flexível anônimo.

Das especificações do flexbox :

Cada filho em fluxo de um contêiner flexível se torna um item flexível e cada execução contígua de texto diretamente contida em um contêiner flexível é envolvida em um item flexível anônimo . No entanto, um item flexível anônimo que contém apenas espaço em branco (ou seja, caracteres que podem ser afetados pela white-spacepropriedade) não é renderizado (como se fosse display:none).

Portanto, basta criar itens de grade como contêineres flexíveis ( display: flex) e adicionar align-items: centere justify-content: centercentralizar vertical e horizontalmente.

Também realizou otimização de HTML e 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>

Nem tente usar o flex; ficar com grade css !! :)

https://jsfiddle.net/ctt3bqr0/

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

está fazendo o trabalho de centralização aqui.

Se você deseja centralizar algo que está dentro da divcélula da grade, é necessário definir a grade aninhada para fazê-la funcionar. (Observe o violino nos dois exemplos mostrados lá.)

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

Felicidades!

A propriedade abreviada de CSS place-items define as propriedades align-items e justify-items, respectivamente. Se o segundo valor não estiver definido, o primeiro valor também será usado para ele.

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

Tente usar o flex:

Demonstração do 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>

Você quer isso?

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>

Eu sei que essa pergunta tem alguns anos, mas estou surpreso ao descobrir que ninguém sugeriu:

   text-align: center;

essa é uma propriedade mais universal que o conteúdo justificado e definitivamente não é exclusiva da grade, mas acho que, ao lidar com texto, que é especificamente o que esta pergunta pergunta, ele alinha o texto ao centro sem afetar o espaço entre os itens da grade ou a centralização vertical. Ele centraliza o texto horizontalmente onde fica em seu eixo vertical. Também acho que ele remove uma camada de complexidade que justifica o conteúdo e o alinhamento de itens. justificar conteúdo e alinhar itens afeta o item ou os itens da grade inteira, alinhar o texto centraliza o texto sem afetar o contêiner em que está. Espero que ajude.