Alineación vertical CSS: cómo centrar un Div, un texto o una imagen [Código de ejemplo]

Original article: CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]

Incluso con herramientas útiles como CSS Grid y Flexbox, centrar elementos en CSS sigue siendo un gran desafío.

Ha sido objeto de muchos chistes y memes, y cuando centras algo con éxito, querrás alardear de ello.

¿Por qué es tan difícil centrar elementos CSS?

CSS puede ser complicado para trabajar. Por ejemplo, si está tratando de alinear algo horizontal o verticalmente, no es tan difícil.

Simplemente puede configurar text-align al centro para un elemento en línea y margin: 0 auto lo haría para un elemento de nivel de bloque.

Pero surgen problemas en múltiples frentes si intenta combinar alineaciones verticales y horizontales.

En este tutorial, te presentaré tres métodos diferentes para centrar correctamente un div, texto o imagen en CSS.

Cómo centrar un elemento con la propiedad de posición CSS

La propiedad de posición de CSS toma valores relativos, absolutos, fijos y estáticos (el valor predeterminado). Cuando se establezca, podrá aplicar las propiedades superior, derecha, inferior e izquierda al elemento.

La combinación de valores relativos y absolutos puede hacer muchas cosas, por lo que puede usarla para centrar cualquier cosa.

Eche un vistazo a los fragmentos a continuación para ver algunos ejemplos.

Cómo centrar texto con posicionamiento CSS

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Cómo centrar una imagen con posicionamiento CSS

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

El código anterior ha hecho que el texto y la imagen estén centrados verticalmente. Para cuidar tanto el centrado vertical como el horizontal, necesitamos hacer un pequeño ajuste en el CSS. Estableceremos la propiedad top al 50 % y agregaremos una transformación en los ejes X e Y.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

El texto ahora se ve así:

Y la imagen quedará así:

Tenga en cuenta que apliqué la propiedad de transformación porque el elemento secundario (con la clase de elemento centrado) estaba ligeramente descentrado. translateY() lo empuja hacia el centro verticalmente y traducir en los ejes X e Y (translate() ) lo empuja hacia el centro vertical y horizontalmente.

Cómo centrar un elemento con Flexbox en CSS

CSS Flexbox maneja diseños en una dimensión (fila o columna). Con Flexbox, es bastante fácil centrar un div, texto o imagen en solo tres líneas de código.

Consulte los fragmentos a continuación para ver ejemplos.

Cómo centrar texto con Flexbox

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

Cómo centrar una imagen con Flexbox

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

Nos encargamos de la alineación vertical en solo dos líneas de código. Para hacer que la imagen y el texto estén centrados horizontalmente, agregue justificar-contenido: centro.

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, I'm now vertically and horizontally centered</p>
    </div>
</div>

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border: 2px solid #006100;
}

El texto ahora se ve así:

Y la imagen quedará así:

Cómo centrar un elemento con CSS Grid

Con Flexbox, es bastante fácil centrar cualquier cosa, ¿verdad? Pero con CSS Grid, es realmente fácil centrar cualquier cosa, porque dos líneas de código son suficientes para hacerlo por ti.

Cómo centrar texto con CSS Grid

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

Cómo centrar una imagen con CSS Grid

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

Los ejemplos anteriores se encargan del centrado vertical por usted. Para que el texto y la imagen también se centren horizontalmente, reemplace los elementos de alineación con place-items, una combinación de align-items y justify-content:

.container {
    display: grid;
    place-items: center;
    height: 600px;
    border: 2px solid #006100;
}

El texto ahora se ve así:

Y la imagen así:

Cómo centrar una división, texto o imagen independiente en CSS

Los tres métodos anteriores le permiten centrar un div, texto o imagen en un contenedor. También puede centrar un div, texto o imagen independiente.

Veamos cómo hacerlo ahora.

Cómo centrar un div independiente en CSS

<div class="container"></div>

div.container {
    height: 300px;
    width: 300px;
    border: 2px solid #006100;
    margin: 0 auto;
  }

Cómo centrar texto independiente en CSS

<p>I'm a Camper, and I'm centered</p>

     p {
         text-align: center;
     }

Cómo centrar una imagen independiente en CSS

<img src="freecodecamp.png" alt="centered" />

img {
      display: block;
      margin: 0 auto;
 }
/* Aplica una visualización de bloque, un margen 0f 0 en la parte superior e inferior, y automático a la izquierda y a la derecha */

Conclusión

Espero que este tutorial le brinde suficiente conocimiento sobre la alineación vertical y cómo centrar elementos en CSS para que sea menos complicado para usted en su próximo proyecto.

Gracias por leer, y sigue codificando.