Cuatro maneras de centrar en CSS

Las recetas de centrado que vale conocer, del truco del margen a place-content.

.wrapper {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.hero {
  display: grid;
  place-content: center;
  min-height: 60vh;
}

.modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

Cómo funciona

1. margin-inline: auto con un ancho centra un bloque.
2. Grid con place-content: center centra en ambos ejes.
3. La receta con transform sigue ganando para una caja absolute.

Palabras clave y builtins usados aquí

• display
• grid
• position
• rem
• transform
• translate
• vh

El intento, en números

Líneas

18

Caracteres a escribir

252

Tokens

64

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 45 segundos.

Escribe este fragmento

Paso 6 de 7 en Posicionamiento; paso 22 de 24 en Flexbox y grid.

← Anterior Siguiente →