Cómo centrar un DIV con

CSS

Por Edwin Gonzales Melquiades

En este tutorial aprenderemos a centrar un DIV con CSS, para esto hay múltiples formas
distintas de centrarlo ya sea en forma horizontal, vertical o ambas.

En este tutorial vamos a ver como centrar un div con CSS. Para lo cual tenemos muchas
alternativas, así que iremos repasando todas las que existen con ejemplos prácticos y mucho
código.

Veamos primero que opciones de centrado tenemos:

Centrar horizontalmente
Para centrar horizontalmente un elemento con CSS, tenemos varios contextos. Veamos
cuales son y como hacerlo:
Elemento Inline, inline-block, inline-
flex o inline-table
Para centrar elementos inline, podemos hacerlo agregando al padre la propiedad text-align
con valor center.

A continuación hice varios ejemplos para que les quede claro como centrar elementos
inline.

NOTA: Algunos elementos inline por defecto son los textos, span, links e imágenes.

Un elemento de bloque
Para centrar un elemento de bloque del cual conocemos su ancho (width), solo basta con
agregar al elemento un margin-left auto y margin-right:auto.

A continuación les mostraré dos ejemplos. En el primero utilizaremos margin-left y margin-

right; mientras que en el segundo usaremos solo el shorthand margin.

Varios elementos de bloque

Si tenemos varios elementos de bloque, tenemos dos alternativas para poder centrarlos
correctamente. La primera es con FlexBox, para eso debemos agregar la propiedad
justify-content:center al elemento que contiene los bloques a centrar.

Veamos un ejemplo de centrado horizontal con FlexBox.

Otra alternativa es convirtiendo los elementos bloque en inline, cambiando la propiedad

display:inline-block y agregando al contenedor text-align:center. Veamos un
ejemplo para que quede más claro.

Y aquí terminamos con la parte del centrado horizontal con css. Ahora veamos como
centrar verticalmente.

Centrar verticalmente
Comencemos a ver el centrado vertical con CSS, para esta parte vamos a dividirlo en dos
segmentos. El primero para elementos inline y el segundo para elementos en bloque.

Elementos Inline
Para centrar elementos inline podemos agregar la propiedad line-height con en valor
igual al tamaño del alto del elemento que lo contiene, siempre y cuando el elemento sea de
una sola línea. Veamos un simple ejemplo:

Como ven, se ha centrado correctamente, pero ¿qué pasa cuando son varias líneas? Cuando
son varias líneas, contamos con dos opciones.

Lo primero que podemos hacer es agregar al contenedor del elemento a centrar display:
table y al elemento display: table-cell y vertical-align:middle, veamos un
ejemplo a continuación:

Otra forma de centrar verticalmente un elemento inline de varias líneas es usando FlexBox y
¿cómo hacemos esto? Simplemente agregando al padre del elemento las siguientes
propiedades: display: flex y align-items: center . Veamos el siguiente ejemplo:

Ahora veamos como centrar verticalmente elementos de bloque.

Elementos de bloque
Podemos centrar elementos de bloque verticalmente de varias maneras. Así que
comenzaremos viendo cuando conocemos el alto del elemento que queremos centrar. Por
ejemplo, queremos centrar un elemento que tiene 100px de alto, para eso solo debemos
agregarle position:absolute, top: 50% y, lo mas importante, agregarle un margen
superior que sea igual a la mitad de su altura pero con signo negativo, en este caso margin-
top: -50px.

Ahora veamos un ejemplo en CodePen para que nos quede mas claro.

Ya lo centramos verticalmente, pero ¿qué pasa si no conocemos la altura del elemento? En

ese caso podemos usar lo siguiente transform: translateY(-50%), en vez de margin-
top. Veamos un ejemplo parecido al anterior.

Y por supuesto tenemos a FlexBox que con un par de lineas hace el trabajo, veamos el
ejemplo con FlexBox.
Hasta el momento hemos visto como centrar elementos con CSS vertical y horizontalmente
por separado. Ahora veamos que debemos hacer cuando necesitamos un centrado vertical y
horizontal a la vez.

Centrado Vertical y Horizontal

Lo más fácil para hacer esto es usar FlexBox, solo debemos usar las siguientes propiedades:
aling-items: center y justify-content: center. Veamos un ejemplo:

Como vieron, en tres líneas tenemos un centrado correcto. Ahora si no queremos usar
FlexBox, otra alternativa sería usar un combinación de lo que hemos aprendido en líneas
anteriores.

Como conclusión y como ustedes han visto, lo más fácil y rápido para centrar elementos es
usar FlexBox. Espero que les sea de utilidad este tutorial y lo compartan por redes sociales.
Además les comento que en DevCode contamos con un Curso de HTML y CSS al cual se
pueden registrar. Nos vemos en un siguiente tutorial =)