Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Centrar DIV horizontalmente con CSS

Ángel Robledano
  • Escrito por Ángel Robledano el 12 de Febrero de 2016
  • 2 min de lectura Diseño Web
Centrar DIV horizontalmente con CSS

Cuando comenzamos a aprender maquetación HTML y CSS, al principio nos abruma la cantidad de etiquetas, atributos, y propiedades que tenemos a nuestra disposición para crear contenido web.

E inexorablemente en algún momento llegamos a un dilema difícil de creer… necesitamos centrar un contenido verticalmente dentro de otro . Tenemos una propiedad css vertical-align a la que podemos darle el valor middle.

Probamos un código como este...

Añadimos la propiedad No obtenemos el comportamiento deseado:

Imagen 0 en Centrar DIV horizontalmente con CSS

Asignar la propiedad vertical-align al contenido en lugar de al contenedor no cambia las cosas. ¿Qué está pasando?

El problema es que esta propiedad no hace lo que creemos . Su utilidad radica en indicar si cuando varios elementos se encuentran en una misma linea de texto, y tienen diferentes alturas, estos se alinearán entre sí desde el borde superior, inferior, centrado (y otras opciones).

Para conseguir el deseado alineado vertical entre contenido y contenedor , vamos a tener que utilizar alguno de los siguientes trucos:

Método 1: display: table-cell

El que menos código exige . Si alguien ha trabajado con tablas de datos, notará que las celdas de estas si que admiten cambiar fácilmente la alineación de su contenido. Podríamos por tanto decirle al contenedor que se comporte como una celda de tabla, añadiendo el siguiente código CSS en el CSS:


.contenedor1 {
        display: table-cell;
        vertical-align: middle;
        text-align: center; /* requerido para alineación horizontal */
}
.contenido1 {
        display: inline-block;
        text-align: left; /* requerido para volver a alinear texto izquierda */
}


Con este pequeño cambio, y eliminando la innecesaria propiedad vertical-align… de pronto ya todo funciona como deseamos.

  • Pros: Muy poco código CSS / HTML que añadir
     
  • Inconvenientes: Semánticamente, el contendor no es una celda de una tabla. Aunque estamos definiendo este comportamiento en CSS y no en HTML, muchos puristas no desearán utilizar esta medida.

Método 2: line-height 50% del alto del contenedor

Si hemos dicho que vertical-align sirve para alinear elementos dentro de una linea de texto, una opción es hacer que la línea sea tan grande como el contenedor , de forma que el contenido quede alineado en medio.

Con el código CSS:


.contenedor2 {
        line-height: 150px;
        text-align: center; /* requerido para alineación horizontal */
}
.contenido2 {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        text-align: left; /* requerido para volver a alinear texto izquierda */
}
  • Pros: Igualmente no mucho código, no tiene implicaciones semánticas
     
  • Contra: Hay que conocer el alto en píxeles y especificarlo exactamente, no funciona indicando porcentaje de 50%.

 

Método 3: display: flex

Con la llegada de CSS3 (y HTML5 por supuesto) y flexbox , tenemos mecanismos avanzados que ya nos permiten controlar mejor situaciones como estas . Bajo este estándar, podemos utilizar un código como este:


.contenedor3 {
        display: flex;
        align-items: center;
}
.contenido3 {
        margin: 0 auto; /* requerido para alineación horizontal */
}
  • Pros: Utilizamos los nuevos estándares para lo que fueron diseñados.
     
  • Contra: No funciona en IE9 o inferior, y otros navegadores muy antiguos.

Recomendación final

Existen muchas otras alternativas para conseguir este efecto , que igualmente pueden ser opciones válidas en función de las circunstancias. Hemos elegido estas porque nos han parecido las más sencillas de implementar en cuanto a código, equilibradas con la compatibilidad con navegadores que ofrecen.

Con la reciente retirada del soporte a antiguas versiones de Internet Explorer por parte de Microsoft, nuestra recomendación final es utilizar el último método con flexbox , que tiene la mayor garantía de compatibilidad futura.

A continuación, el código completo con todos los ejemplos:

 

Si tienes conocimientos sobre maquetación web y quieres profundizar en los mismos, en nuestra plataforma online encontrarás interesantes cursos para ello, por ejemplo, el curso de Flexbox y CSS Grid, con el que aprenderás a maquetar la web de forma fácil y profesional. Accede ahora a este y muchos otros cursos de forma gratuita, gracias a los 15 días de prueba que te ofrecemos aquí.

 

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Qué es CSS3 y sus fundamentos

Qué es CSS3 y sus fundamentos

Desarrollo Web

20 de Enero de 2019

¿Te has parado a pensar que es lo que hace una Web se vea tan bonita? Para dar ese  aspecto a una página se utiliza CSS. Te contamos qué es CSS3, cubriendo qué es y dónde se usa en los si...

Curso de maquetación web con CSS

Curso de maquetación web con CSS

curso

Con este curso aprenderás:

  • Aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.
  • Conocerás el funcionamiento a nivel de maquetación de los distintos tipos de etiquetas.
  • Comprenderás cómo funciona el flujo de una Web

Duración: 2 horas y 10 minutos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Más de 300 empresas confían en nosotros

Oesia
Vass
Everis
Ayesa
Altran
Ibermatica
Atmira
GFI
Accenture
GMV
Concatel
Telefonica
Caser
Banco de España
kpmg
Mapfre
Randstad