Centrar horizontal y verticalmente en CSS un elemento

Existen diversas formas de centrar horizontal y verticalmente un elemento en un contenedor mediante CSS. Cada método es adecuado para una situación concreta y, por ello, es necesario saber cómo funcionan todas las propiedades para reconocer fácilmente qué técnica utilizar en cada caso.

A continuación se describe cómo se puede realizar el centrado de algunos elementos mediante cajas flexibles, con la propiedad «transform«, con las propiedades «line-height» y «text-align» y con la propiedad vertical-align.

1. Centrar vertical y horizontalmente elementos con flexbox

Este es el método más útil porque funciona para todos los elementos que se posicionen dentro de un contenedor. Por tanto, es válido para imágenes, textos, vídeos, etc. Sin embargo, para comprender cómo funciona es necesario tener conocimientos sobre el modelo de caja flexible o flexbox.

Para utilizar las propiedades de flexbox es necesario crear un contenedor y declararle la propiedad «display: flex«. Para centrar horizontal y verticalmente el contenido utilizaremos las propiedades «justify-content: center» y «align-items:center«.

div{
    display:flex;
    justify-content: center;
    align-items: center;
}

Ejemplo

2. Centrar vertical y horizontalmente un texto con line-height y text-align

Mediante las propiedades line-height y text-align podemos alinear únicamente textos. Así que este método sólo va a ser válido para el centrado de párrafos, encabezados, etc.

div {
    text-align: center;
    height: 200px;
}
div h1 {
    line-height: 200px;
}

Ejemplo

3. Centrar vertical y horizontalmente una imagen o contenedor con propiedad transform y posición absoluta

Mediante este método se puede alinear tanto vertical como horizontalmente imágenes y contenedores. No es válido para la alineación de textos ya que no tiene en cuenta el tamaño de la letra. El centrado de elementos se realiza mediante posición absoluta y la propiedad transform.

div {
    position: relative;
}
div img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Ejemplo

4. Centrar un elemento vertical y horizontalmente utilizando posición absoluta y margen negativo

Centrado absoluto con posición absoluta y margen negativo:

.container {
  position: relative;
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* Ajusta el valor según la mitad de la altura del elemento */
  margin-left: -50px; /* Ajusta el valor según la mitad del ancho del elemento */
}

Ejemplo

5. Centrar un elemento con grid

Para centrar un elemento con grid se debe utilizar display: grid y place-items: center en el contenedor. De esta forma, el elemento se centrará tanto vertical como horizontalmente dentro del contenedor.

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

En el siguiente ejemplo, el contenedor tiene una altura fija de 300px y un borde para que puedas visualizarlo. El elemento que deseas centrar está dentro del contenedor y tiene un fondo gris claro y un relleno de 20px.

Ejemplo

6. Alinear un texto verticalmente con una imagen con vertical-align

Con esta técnica podemos alinear un texto a una imagen de forma vertical. Esta propiedad admite los valores top, middle y bottom, entre otros valores.

img{
    vertical-align: middle;
}

Ejemplo

7. Alinear verticalmente un texto en un div con vertical-align y el modelo de tabla (table mode)

Vamos a alinear un texto en un div con la propiedad vertical-align. Hay que tener en cuenta que esta propiedad no se comporta de la misma manera con todos los elementos. En este caso, haremos uso de las reglas de estilo «display: inline-table» y «display: table: cell».

div{
   height: 200px; width: 200px;
   background-color: #EEE;
   display: inline-table;
 }
 p{ 
   display: table-cell; 
   vertical-align: middle;
 }

Ejemplo

8. Alinear horizontalmente una imagen con text-align

Las imágenes se pueden alinear a la izquierda, derecha o centro insertándolas dentro de un div e indicando la propiedad text-align correspondiente.

.a{text-align: left;}
.b{text-align: center;}
.c{text-align: right;}

Ejemplo

9. Alinear verticalmente un checkbox con un label

Cuando el tamaño del texto no coincide con el tamaño del checkbox, estos dos elementos no quedan alineados verticalmente. Para conseguir esta alineación utilizaremos «vertical-align:middle» y definiremos el tamaño del texto a las dos etiquetas, tal y como se muestra a continuación.

label, input{
    font-size: 28px;
    vertical-align: middle;
}

Ejemplo

10. Alinear un elemento según el ancho y alto de la pantalla (viewport)

Para centrar elementos vertical y horizontalmente según el tamaño de la pantalla (viewport) en CSS, puedes utilizar las unidades de medida relativas vh y vw junto con las propiedades vistas anteriormente, por ejemplo con Flexbox. Esto garantiza que los elementos permanezcan centrados independientemente del tamaño de la pantalla del dispositivo.

div{
  height: 100vh;

  display:flex;
  justify-content: center;
  align-items: center;
}

Ejemplo