Centrar Verticalmente con CSS

Publicado el Jue 10 de Marzo del 2022 a las 22:22

Hoy veremos tres formas diferentes de alinear una web verticalmente con CSS, totalmente validadas por el W3C y que dará ese toque de estética a tu web.

Método con flexbox (recomendado)

Este método es el más recomendado y fácil de implementar. Desarrollamos el siguiente código:

<div class="padre">
   <div class="hijo">Tu contenido aquí.</div>
</div>

.padre {
   display: flex;
   align-items: center;
   height: 100px;
}

Con align-items: center centramos verticalmente. Si deseamos centrar horizontalmente usamos la propiedad justify-content: center.

Método Line-height

Este método es solo aplicable con líneas de textos. Desarrollamos el siguiente código:

<div class="padre">
   <div class="hijo">Tu contenido aquí.</div>
</div>

.padre .hijo {
  line-height: 200px;
}

Método Table

Con este método trabajamos las capas(div) como tablas y celdas HTML, lo que permite usar la propiedad vertical-align: middle. Desarrollamos el siguiente código:

<div class="padre">
   <div class="hijo">Tu contenido aquí.</div>
</div>

.padre {
  display: table;
  height:200px;
  width: 100%;
}
.padre .hijo {
  display: table-cell;
  vertical-align: middle;
}