Centrado en CSS Grid

179

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>

raíz de remolacha
fuente
1
Consulte el enlace w3.org/Style/Examples/007/center.en.html , espero que le sea útil.
Ali

Respuestas:

433

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

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


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.


auto márgenes

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

grid-item {
  margin: auto;
}

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


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.

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.

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:

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

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

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

Michael Benjamin
fuente
Hola Michael, me preguntaba si es posible simplemente usando la cuadrícula para cambiar el tamaño de cada columna al tamaño de la columna más pequeña de la fila.
The Codesee
@TheCodesee, eso puede ser posible, dependiendo de todos sus requisitos. ¿Tiene una muestra de código? O considere publicar una nueva pregunta con todos los detalles.
Michael Benjamin
es grid-containery grid-itemson etiquetas HTML?
diEcho
1
Son etiquetas HTML personalizadas . Puede crear sus propias etiquetas, como hice para esta demostración. stackoverflow.com/q/36380449/3597276 @ pro.mean
Michael Benjamin
55
Esta es una respuesta maravillosa, gracias. Me hizo dar cuenta, en sus dos primeros ejemplos, que entre flexy grid, align-itemssigue siendo el mismo, pero por alguna razón justify-contentse convierte enjustify-items
Woj
11

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>

Vadim Ovchinnikov
fuente
9

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!

Konrad Albrecht
fuente
Me preguntaba sobre las cuadrículas anidadas. Gracias por mostrarme cómo se hace, supongo. Entonces, ¿crees que la flexión debe evitarse con la cuadrícula o está bien combinarla?
remolacha
Está bien combinarlo, pero debe estar seguro de que está utilizando la herramienta adecuada para el trabajo. Encuentra algo de tiempo y mira la presentación de Rachels, que te aclarará mucho en el tema de la cuadrícula CSS. youtu.be/3vJE3bVoF-Q
Konrad Albrecht
El problema con este enfoque se produce cuando se utilizan bordes en los elementos de la cuadrícula ...
Andrew
2
Esto puede ser acortado por place-self: center;.
DevonDahon
6

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;
}
NubeRama
fuente
place-itemsactualmente no es compatible con edge
Konrad Albrecht
1

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>
Younis Ar M
fuente
-2

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

Renato siqueira
fuente
1
No exactamente. El texto también debe estar alineado verticalmente.
remolacha
Uso.text{ font-family: Raleway; font-size: large; text-align: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }
Renato siqueira
-2

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.

Aft3rL1f3
fuente