blog/centrar-verticalmente-con-css
Por Yal Publicidad
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.
Este método es el más recomendado y fácil de implementar. Desarrollamos el siguiente código:
HTML<div class="padre"> <div class="hijo">Tu contenido aquí.</div> </div>CSS
.padre { display: flex; align-items: center; height: 100px; }
Con align-items: center centramos verticalmente. Si deseamos centrar horizontalmente usamos la propiedad justify-content: center.
Este método es solo aplicable con líneas de textos. Desarrollamos el siguiente código:
HTML<div class="padre"> <div class="hijo">Tu contenido aquí.</div> </div>CSS
.padre .hijo { line-height: 200px; }
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:
HTML<div class="padre"> <div class="hijo">Tu contenido aquí.</div> </div>CSS
.padre { display: table; height:200px; width: 100%; } .padre .hijo { display: table-cell; vertical-align: middle; }