En mi opini贸n la combinaci贸n HTML+CSS es un verdadero infierno. Es para volverse loco como el de la foto. Y si le a帽ades JavaScript no te quiero ni contar. Y no deber铆a ser as铆. Hay muchas cosas que debes hacer normalmente y que deber铆an ser muuuuy f谩ciles, pero CSS las convierte en algo complicad铆simo. Por ejemplo lo que me ocupa hoy: si quiero que un elemento de mi p谩gina aparezca centrado dentro de su elemento padre 驴por qu茅 no puedo poner simplemente un atributo 鈥渃entered:true;鈥 o algo as铆?. No deber铆a ser tan complicado como es ahora 驴verdad?.

Bien es cierto que no soy un super-experto en CSS y que adem谩s lo que de verdad convierte el trabajo Web en un infierno son los navegadores y sus peque帽as sutilezas y diferencias a la hora de cumplir (o no) los est谩ndares. Pero tambi茅n es verdad que es excesivamente complicado y no deber铆a ser as铆. Encima todav铆a hay mucho ga帽谩n por ah铆 que usa Internet Explorer 6 (o peor a煤n, Windows 98), Firefox del a帽o de la polka, o (me dan escalofr铆os s贸lo de pensarlo) alguna versi贸n de Netscape. Y as铆 es cuando es imposible conseguir algo que funcione como es debido. A esos, lo siento mucho, pero que no har茅 esfuerzo alguno por darles soporte en mis p谩ginas. Total, acabar谩n tarde o temprano con el ordenador frito por alg煤n virus (muy merecidamente), y se comprar谩n uno nuevo con Windows 7 o Mac OS X. Como Dios manda ;-)

Bueno, a lo que 铆bamos, que me disperso鈥

Si tienes que conseguir que un elemento de tu p谩gina se centre autom谩ticamente en la misma lo que tienes que hacer es aplicarle un estilo como este:

.centrado{
  margin-left: auto;
  margin-right: auto;
}

Es decir, lo que tenemos que hacer es indicar que queremos un margen autom谩tico tanto a la izquierda como a la derecha del elemento. Obvio y sencillo 驴verdad? ;-)

隆No me funciona en Internet Explorer!

Esto funcionar谩 bien en Chrome, Firefox o Safari, pero si lo pruebas en Internet Explorer 8 no te har谩 ni caso por defecto. M谩s de alguno ya estar谩 pensando: 鈥溌aldita sea!, estos #$%@ de Microsoft pasando de cumplir con los est谩ndares鈥.

Bueno en realidad lo que pasa es otra cosa. Si no le indicamos otra cosa, por defecto IE8 mostrar谩 el contenido HTML en modo "quirks", es decir, en modo de compatibilidad con p谩ginas viejas, por lo que no har谩 caso a indicaciones est谩ndar que le pongamos. Pero eso no siginifica que no soporte el est谩ndar adecuadamente (al menos en este caso). Simplemente hay que indicarle que debe hacerlo.

Para ello lo que hay que hacer es poner como primera l铆nea del c贸digo HTML el tipo de documento, indicando por tanto que debe ce帽irse a un est谩ndar concreto (s铆, IE es un infierno). Por ejemplo, para XHTML 1.0 ser铆a este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Haciendo esto, ahora IE8 intepreta correctamente las instrucciones y centra el elemento horizontalmente al aplicarle un estilo como el anterior.

隆Eh! Las im谩genes siguen sin centrarse

Claro. Es que lo anterior se aplica a aquellos elementos, como los DIV, que se renderizan en modo bloque. Sin embargo las im谩genes se renderizan en modo "inline" (en l铆nea con el texto y otros elementos inline), por lo que no hace ni caso a los atributos anteriores de margen autom谩tico. Otros elementos inline son los enlaces, span, controles input, etc...

驴C贸mo lo solucionamos?

Pues tenemos dos opciones: usar el estilo CSS "text-align:center;" que hace que el texto (y los elementos en l铆nea) se centren o, mejor a煤n, hacer que la imagen se comporte como un elemento de bloque a帽adiendo a sus estilos "display:block;":

.centrado{
  display:block;
  margin-left: auto;
  margin-right: auto;
}

Al hacer esto ya se comportar谩 de la manera esperada.

驴Y c贸mo centro verticalmente?

Buena pregunta. Me alegro de que la hagas... En CSS2 tampoco hay ninguna forma f谩cil de hacerlo. Y a煤n es m谩s rebuscado que el caso anterior.

B谩sicamente lo que hay que hacer (y lo dice la propia W3C), es hacer que el elemento contenedor del elemento que queremos centrar se comporte como una celda de una tabla. Como las celdas de las tablas s铆se pueden alinear con el estilo vertical-align, entonces si le damos una determinada altura seremos capaces de que se centren los elementos que contiene:

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

El problema es que esto destruye el centrado horizontal del elemento padre, y si queremos centrar ambos tenemos que nidar otros elementos.

En resumen

Lo dicho: una pesadilla. Parece mentira.

La versi贸n 3 de CSS, que lleva en desarrollo desde 2005, parece que algo van a hacer para mejorarlo. No me he le铆do a fondo el draft actual de la parte de posicionamiento de elementos (que es de abril de este a帽o), pero eso de definir "slots" y colocar cosas en ellos posicion谩ndolos con letras no me llama ni un poco. A este paso va a ser m谩s dificil aprender HTML+CSS que sacarse la carrera de aeron谩uticos :-(

Por cierto, me ha llamado la atenci贸n ver que en el Draft de esta parte est谩 trabajando un espa帽ol de la Univerdad de Oviedo...

En fin, espero que lo que cuento en este post te resulte de ayuda y te saque de alg煤n apuro.

💪🏻 驴Este post te ha ayudado?, 驴has aprendido algo nuevo?
Pues NO te pido que me invites a un caf茅... Te pido algo m谩s f谩cil y mucho mejor