Cómo centrar un DIV con CSS

Por user Edwin Gonzales Melquiades
Cómo centrar un DIV con CSS

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.

See the Pen dYdBoG by Edwin Prospero Gonzales Melquiades (@edwinpgm) on CodePen.


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.

See the Pen vNdqKy by Edwin Prospero Gonzales Melquiades (@edwinpgm) on CodePen.


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.

See the Pen qOojMN by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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.

See the Pen GpxEYO by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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:

See the Pen VvXzar by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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:

See the Pen VvXzbQ by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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:

See the Pen rOdzYM by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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.

See the Pen XmEaBM by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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.

See the Pen gaexjq by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


Y por supuesto tenemos a FlexBox que con un par de lineas hace el trabajo, veamos el ejemplo con FlexBox.

See the Pen xwWLaP by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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:

See the Pen Bordqg by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.


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 =)

user

Edwin Gonzales Melquiades

Frontend Developer. Fundador de DevCode. Me gusta Javascript y Python.