OpenWebinars

Diseño Web

Centrar DIV horizontalmente con CSS

Aprende 3 métodos para centrar DIV horizontalmente con este vídeotutorial.

Angel Robledano

Angel Robledano

Product Manager

Lectura 2 minutos

Publicado el 12 de febrero de 2016

Compartir

    Tabla de contenidos

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.

Conviértete en un Backend Developer
Domina los lenguajes de programación más demandados. Accede a cursos, talleres y laboratorios para crear proyectos con Java, Python, PHP, Microsoft .NET y más
Comenzar gratis ahora

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.
Mejora las habilidades de tus desarrolladores
Acelera la formación tecnológica de tus equipos con OpenWebinars. Desarrolla tu estrategia de atracción, fidelización y crecimiento de tus profesionales con el menor esfuerzo.
Solicitar más información

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í.

 

 
Compartir este post

También te puede interesar

Qué es CSS3 y sus fundamentos
Blog

Qué es CSS3 y sus fundamentos

Si quieres conocer qué es CSS3, cuáles son sus fundamentos y cómo funciona conjuntamente con HTML, tienes toda la información en este...

Juan Diego Pérez Jiménez
Icono de la tecnología
Curso

Maquetación web con CSS

Intermedio
2 h. y 10 min.

Aprende maquetación Web con CSS para que mediante el uso de hojas estilos puedas definir claramente la estructura...

Juan Diego Pérez Jiménez
4.5