Como centrar un elemento en vertical y horizontal con CSS

Antonio Sierra — Thu, 22 Aug 2019 16:17:55 +0000

Cuando somos nuevos en el mundo del desarrollo web, uno de los desafíos mas comunes al momento de realizar maquetacion es centrar elementos(Vertical y Horizontal) con respecto a su contenedor. Suele ser una tarea sencilla si ya tienes experiencia, pero si ese no es tu caso te quiero mostrar unas formas de hacerlo de manera muy fácil.

Como centrar usando position

Si tubieramos el siguiente caso, donde un elemento padre tiene un elemento hijo y quisieras que su hijo estubiera centrado con respecto a su padre.

<div class="padre">
    <div class="hijo"></div>
</div>

Usando position lo hariamos de la siguiente manera

.padre {
    width: 200px;
    height: 200px;
    background: red;

    position: relative; /*El padre debe estar posicionado (relative, absolute o fixed)*/
}

.hijo {
    width: 50px;
    height: 50px;
    background: blue;

    position: absolute;
    left: 50%;
    top:  50%;
    transform: translate(-50%, -50%);
}

Como podemos observar el hijo lo estamos posicionando absolutamente, eso quiere decir que se posicionara con su elemento padre mas cercano en este caso el div .padre, después movemos al hijo 50% en izquierda y 50% en derecha, esto centra al hijo con respecto a su vértice superior izquierdo.

Pero esto no es lo que queremos, nosotros queremos que sea un centrado absoluto. Para eso usamos la propiedad transform para mover el .hijo -50% en horizontal y vertical con respecto a su tamaño, y con este pequeño truco lograríamos el centrado.

Como centrar usando flexbox

Teniendo en cuenta el mismo caso anterior del div padre y el div hijo, usando flexbox solo es necesario aplicar estilos al .padre de la siguiente manera.

.padre {
    width: 200px;
    height: 200px;
    background: red;

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

De esta manera sencilla usando flexbox lograriamos el mismo resultado

Espero que estos pequeños trucos sean de mucha utilidad y te sirvan para seguir ganando experiencia en el desarrollo web.

DEV Community: Antonio Sierra

Como centrar un elemento en vertical y horizontal con CSS

Como centrar usando position

Como centrar usando flexbox