Centrado absoluto horizontal y vertical en CSS

Comment

Cliente (HTML, Javascript, CSS) Programación
CSS Centering

Sabemos que hacer “margin: 0 auto;” nos sirve para el centrado horizontal, pero “margin: auto;” no funciona para el centrado vertical… hasta ahora!

Porque tiene solución, el centrado absoluto requiere que el “height” sea declarado, además de los siguientes estilos:

centradoAbsoluto {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;}

 

 

Esto se trata de una técnica conocida como “centrado absoluto”, sin embargo, la mayoría de los artículos que tratan el tema de centrado vertical, nunca mencionan ésta técnica. El autor original de este post, lo descubrió a través de los comentarios de un artículo relacionado, donde se demuestra el funcionamiento a través del siguiente JSFiddle.

Nunca antes usé esta técnica, la probé y funciona. Si conoces otra técnica o alguna mejora, por favor comenta en este artículo.

Ventajas:

  • cross-browser (incluyendo IE8-10)
  • sin etiquetas especiales de estilo
  • responsive con porcentajes min-/max-
  • usa una clase para centrar cualqueir contenido
  • centrado independiente del relleno (sin box-sizing)
  • div pueden fácilmente ser re-dimensionados
  • funciona genial con imágenes

Contras:

  • la propiedad “height” debe ser declarada
  • se recomienda indicar “overflow: auto” para prevenir el escape de contenido
  • no funciona en Windows Phone

Fuente: Absolute Horizontal And Vertical Centering In CSS – Smashing Magazine.

Deja un comentario