Cómo centrar horizontal y verticalmente con CSS

El otro día leía una frase muy curiosa que decía que el hombre ha llegado a la luna pero no ha podido centrar horizontal y verticalmente una capa con CSS y tiene razón, este pequeño procedimiento no existe como tal en CSS. Hay opciones como flexbox pero su uso no es estándar todavía y es un poco difícil de manipular sólo para lograr este centrado. Recién investigue un poco sobre una solución rápida y sencilla y di con el clavo.

Lo que vamos a ver en este tutorial es aprender a centrar horizontal y verticalmente una capa con CSS, ni siquiera se necesita CSS3 ni nada, se hace uso de las mismas propiedades de CSS para hacer el efecto (porque como les dije, como tal no hay una alineación vertical u horizontal) un tanto parecido como lo que hacemos para centrar horizontalmente una capa, pero ahora en ambos lados.

Demo del tutorial

HTML

Para este tutorial necesite dos capas, una para centrar la capa container y otra para centrar el texto

CSS

La maravilla radica en que gracias a la propiedad de posición podemos mover libremente nuestro objeto, pero cuando agregamos un margen de 0 y las posiciones del objeto también es cuando logramos que (¿el bug?) se alinea tanto de forma vertical y horizontal. Ahora, para centrar el texto realmente el truco es poner el alto de tal forma que sólo ocupe el alto del texto, porque si le ponemos una altura diferente la capa se va a centrar, pero el texto no.

De lo anterior radica que este truco es para centrar capas, no para centrar textos ya que como tal esta propiedad sigue sin existir. Otra característica importante es que estas capas están flotando por lo cuál no se acomodan al contexto en línea del sitio; con esto quiero decir que si colocan contenido antes o después de esta capa el texto aparecerá como si la capa no estuviera entre los dos porque por la propiedad de position no es posible que encaje en línea.

¿Te gustó el tutorial?