Alinear un elemento en el centro de la pantalla con Flexbox

Hola amigos hoy veremos como podemos alinear perfectamente un elemento en el centro de nuestra pantalla utilizando Flexbox.

Primero creamos esta sencilla estructura HTML.


<html>
<head>
        <meta charset="UTF-8">
        <title>Prueba Flex Box</title>
        <link rel="stylesheet" href="estilos.css">
</head>
<body>
        <div class="principal">
                <div class="caja"></div>
        </div>
</body>
</html>

Y el css hace la magia Cool


.principal {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
}
 
.caja {
        width: 300px;
        height: 300px;
        background: url("http://i2.kym-cdn.com/entries/icons/original/000/006/151/tumblr_lltzgnHi5F1qzib3wo1_400.jpg") center no-repeat;
}

 

 

 

Tags: