Centrar vertical y horizontalmente con CSS3

Ago 11, 2017 | CSS, Diseño, DIVI (Elegant Themes), Tutoriales

Centrado Namaste Web MálagaEn este minitutorial, vamos a aprender como podemos centrar un contenido dentro de un modulo tanto horizontal como verticalmente.

Para ello vamos a utilizar la propiedad de CSS3 display: flex

Este ejemplo está realizado con el tema DIVI, aunque el código es extensible a otros temas.

Por ejemplo vamos a centrar una imagen de ejemplo (en este caso el logo de DIVI) en una fila.

En este caso partimos de una sección con una fila y dos columnas, una de texto y la imagen que queremos centrar.

Modulo Divi Namaste Web Málaga

El diseño quedaría así. Le he puesto color a las columnas para ver mejor el efecto.

Imagen 2

Lo primero que debemos hacer es indicarle a la fila que iguale la altura de las columnas

imagen3

El centrado horizontal no tiene mucha historia, ya que al módulo de imagen de DIVI solo hay que decirle que la imagen en vez de ponerla a la izquierda, la centre. El diseño de momento quedaría así:

imagen 4

Ahora toca centrar la imagen verticalmente, para ello nos vamos al CSS de la fila y en la casilla correspondiente al CSS del apartado principal de la columna 2 copiamos el siguiente código:

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;

imagen 5

Una vez introducido ese código, el diseño nos quedará de la siguiente manera, con la imagen centrada tanto horizontalmente como verticalmente.

imagen 6

Este código se puede utilizar para centrar cualquier contenido, ya sea una imagen, un texto, un formulario, etc.

Bueno, espero que este post os haya gustado y os haya sido de utilidad. Si ha sido así, por favor compartid y comentar que os ha parecido.

Summary
Review Date
Reviewed Item
Centrar vertical y horizontalmente con CSS3
Author Rating
51star1star1star1star1star
Share This
A %d blogueros les gusta esto: