HTML/CSS - Cómo centrar elementos y no morir en el intento

Centrando elementos

Después de un periodo de inactividad, vacaciones, letargo quizás, de alrededor 3 años, estamos de vuelta para seguir publicando una que otra cosilla útil. En esta ocasión, vamos a hablar un poco de cómo centrar elementos horizontal y verticalmente, lo cual, es muchas veces un dolor de cabeza incluso para aquellos con un poco o un mucho de experiencia en programación web.

Centrando elementos horizontalmente

Esta parte es muy sencilla realmente. Solo es necesario saber qué tipo de elemento HTML es el que estamos tratando de centrar; elementos block o elementos inline (se recomienda ampliamente leer los enlaces anteriores).

Una vez teniendo razonablemente clara la diferencia entre elementos y habiendo identificado a qué categoría pertenece lo que queremos centrar, podemos comenzar.

Centrando elementos horizontalmente: Elementos block

Esta es una tarea sencilla y para ello se usa la propiedad margin. Lo único que hay que hacer es establecer márgenes horizontales automáticos, de esta manera, el navegador sabe que es necesario colocar la misma "porcion" de margen a la izquierda y a la derecha de manera que se pueda "rellenar" horizontalmente el contenedor padre.

<div class="parent">
  <div class="child"></div>
</div>


.parent .child{
  margin: 0 auto;
}

Ejemplo:

• margen vertical
• margen automático
• Elemento centrado
• margen automático
• margen vertical

Como podemos ver hay dos márgenes; los horizontales automáticos que se encargan de centrar la imagen y los verticales que están definidos por el usuario/programador que corresponden al 0 de

margin: 0 auto;

Centrado elementos horizontalmente: Elementos inline/inline-block

Por otro lado, tenemos a los elementos inline/inline-block. Los cuales, como podemos leer en los enlaces anteriores, no forman bloques y no ocupan toda la línea donde aparecen sino que ajustan su tamaño a su contenido, entre otras cosas.

Para centrar elementos inline/inline-block es necesario estilizar al padre.

<div class="parent">
  <div class="child"></div>
</div>


.parent{
  text-align: center;
}

Ejemplo:

Elemento centrado

Como vemos, en este caso es el contenedor padre el que hace que su contenido se centre. El elemento a centrar (en este caso del tipo inline/inline-block) no ocupa todo el ancho de su contenedor padre, por lo que queda "espacio libre" donde puede "moverse" a la izquierda/derecha, es precisamente ese "espacio libre" el que permite que el padre pueda centrarlo, muy similar a cuando centramos texto con esa misma propiedad,

text-align: center;

Centrando elementos: verticalmente

Esta parte es quizás una de las más complicadas para algunos (incluído yo). Hay muchos, muchos enfoques y métodos para centrar elementos verticalmente, algunos son más sencillos que otros, otros son más elegantes, algunos brindan soporte crossbrowser y otros simplemente explotan catastroficamente en navegadores no tan recientes. En el sitio donde trabajo, nos vemos obligados a apostar por compatibilidad crossbrowser antes que cualquier cosa, debido a que muchos de los clientes para los que creamos contenido utilizan navegadores un poco retro, por decirlo de una forma bonita.

Teniendo este detalle en mente, el método que vamos a ver aquí sí aporta compatibilidad crossbrowser además de que es bastante sencillo. Se trata de jugar un poco con la propiedad display. A continuación el código.

<div class="parent">
  <span></span>
</div>
 
.parent{
  display: table;
  width: 100%;
}

.parent span{
  display: table-cell;
  vertical-align: middle;
}

Es bien sabido (o quizás no tanto) que los elementos de tipo list item se pueden alinear verticalmente con facilidad, además, las propeidades descritas anteriormente no son nuevas por lo que este enfoque da soporte desde Internet Explorer 9 lo cual ya es decir bastante. El width:100%; que aparece en el codigo CSS es para ajustar el ancho del contenedor padre, ya que al establecer su propiedad display en table, su ancho se ajusta automaticamente a su contenido, igual que los elementos inline/inline-block. Todo lo demás es sencillo y no requiere de explicaciones muy profundas.

Ejemplo:

Elemento centrado verticalmente c:

Como siempre, cualquier duda, pregunta, sugerencia será razonablemente leída y atendida a la brevedad (ahora sí). Saludos c: