Centralização na Grade CSS


179

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>


1
Por favor, verifique o link w3.org/Style/Examples/007/center.en.html , espero que seja útil.
287 Ali Ali

Respostas:


433

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

Veja este post para uma explicação completa:


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.


auto margens

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

grid-item {
  margin: auto;
}

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


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

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.

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:

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

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

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


Oi Michael, eu queria saber se é possível apenas usando a grade para redimensionar cada coluna para o tamanho da menor coluna na linha?
O Codesee

@TheCodesee, isso pode ser possível, dependendo de todos os seus requisitos. Você tem um exemplo de código? Ou considere postar uma nova pergunta com todos os detalhes.
Michael Benjamin

é grid-container& grid-itemsão tags HTML?
diEcho

1
Eles são tags HTML personalizadas . Você pode criar suas próprias tags, como eu fiz para esta demonstração. stackoverflow.com/q/36380449/3597276 @ pro.mean
Michael Benjamin

5
Esta é uma resposta maravilhosa, obrigado. Isso me fez perceber, em seus dois primeiros exemplos, que entre flexe grid, align-itemspermanece o mesmo, mas por algum motivo justify-contentse tornajustify-items
woj

11

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>


9

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!


Eu estava pensando sobre as grades aninhadas. Obrigado por me mostrar como é feito, eu acho. Então você acha que o flex deve ser evitado com a grade ou é bom combinar?
beterraba

É bom combinar, mas você precisa ter certeza de que está usando a ferramenta certa para o trabalho. Encontre algum tempo e assista à apresentação de Rachels, que esclarecerá muito para você no tópico da grade de css. youtu.be/3vJE3bVoF-Q
Konrad Albrecht

O problema com esta abordagem ocorre quando você estiver usando fronteiras sobre os itens da grade ...
Andrew

2
Isso pode ser reduzido por place-self: center;.
DevonDahon 23/09/19

6

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

place-itemsatualmente não é suportado na borda
Konrad Albrecht

1

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>

-2

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>


1
Não é bem assim. O texto também deve estar alinhado verticalmente.
beterraba

Use.text{ font-family: Raleway; font-size: large; text-align: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }
Renato siqueira 7/08

-2

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.