logo

Consejo rápido:la forma más sencilla de centrar elementos vertical y horizontalmente

Flexbox es una adición relativamente nueva al mundo CSS y seguimos encontrando más y más aplicaciones excelentes para él. Incluso podemos resolver el antiguo problema de centrar un elemento tanto vertical como horizontalmente con CSS. Es más fácil de lo que puede imaginar:son solo tres líneas de código, no requiere que especifique el tamaño del elemento centrado y es compatible con la capacidad de respuesta.

Esta técnica funciona en todos los navegadores modernos:IE10+, Chrome, Firefox y Safari (con el -webkit- prefijo). Consulta la tabla de compatibilidad completa aquí.

<div class="container">
    <!--// Any content in here will be centered.-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus, eros et aliquam volutpat, ante tellus bibendum justo, et mollis orci velit ut odio. Maecenas sagittis mi velit, sit amet varius lorem ornare in. Sed dapibus turpis vel nunc finibus cursus. Nunc erat purus, sodales sit amet neque et, aliquam pretium felis. Mauris eros est, elementum eu eros ut, feugiat fermentum metus. In hac habitasse platea dictumst. Integer tristique semper semper. Etiam quis ligula sit amet ipsum condimentum euismod. Praesent iaculis ante et magna suscipit vulputate. Curabitur vitae porttitor erat. Vivamus vel blandit tellus, ut sollicitudin metus.</p>
</div>
*{
    margin: 0;
    padding: 0;
}

body, html{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.container p{
    max-width: 50%;
    padding: 15px;
    background-color: #f1f1f1;
}

El HTML

La idea, por supuesto, gira en torno a flexbox. Primero, creamos un contenedor en el que queremos que todo esté centrado:

<div class="container">
    <!--// Any content in here will be centered.-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

Puede colocar este contenedor div en cualquier lugar que desee. En el ejemplo en vivo anterior, hemos hecho que ocupe todo el ancho y el alto de la página.

El CSS

Como dijimos anteriormente, usaremos solo tres líneas de código. Aquí están:

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

Cada contenedor flexible tiene dos ejes para posicionar elementos. El eje principal se declara con el flex-direction propiedad (puede ser row o column , ver documentos). Al omitir esta regla, hemos dejado la dirección flexible en su valor predeterminado row valor.

Ahora todo lo que tenemos que hacer es centrar ambos ejes. No podría ser más simple:

  1. Haga que el tipo de pantalla flex , para que activemos el modo flexbox.
  2. justify-content define dónde se alinearán los elementos flexibles según el eje principal (horizontalmente en nuestro caso).
  3. align-items hace lo mismo con el eje perpendicular al principal (verticalmente en nuestro caso).

Ahora que hemos establecido las reglas para la alineación vertical y horizontal en centro , cualquier elemento que añadamos dentro del contenedor se posicionará perfectamente en el medio. No necesitamos saber sus dimensiones de antemano, ¡el navegador hará todo el trabajo duro!

Conclusión

Hay muchas otras técnicas para centrar el contenido con CSS, pero flexbox lo hace mucho más simple y elegante. Si desea obtener más información al respecto, consulte estos recursos:

  • Una guía completa de flexbox - aquí.
  • MDN:Uso de cajas flexibles CSS (una lectura larga) - aquí.
  • Flexbox en 5 minutos - aquí.