Centrado horizontal y vertical absoluto en CSS

Este artículo fue actualizado el 31 de enero de 2019 para actualizar la información proporcionada a continuación. La información antigua no es errónea, sin embargo es la versión más nueva menos hacendosa y sí hace uso de Flexbox, uno de los nuevos estándares de los diseños web modernos.

.Absolute-Center { display: flex; // make us of Flexbox align-items: center; // does vertically center the desired content justify-content: center; // horizontally centers single line items text-align: center; // optional, but helps horizontally center text that breaks into multiple lines} 

Aquí está el artículo original de agosto de 2013:

Todos hemos visto margin: 0 auto; para el centrado horizontal, pero margin: auto; se ha negado a funcionar para el centrado vertical… ¡hasta ahora! Pero en realidad (¡alerta de spoiler!) el centrado absoluto sólo requiere una altura declarada y estos estilos:

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

No soy el pionero de este método (y sin embargo me he atrevido a llamarlo Centrado Absoluto), y puede que incluso sea una técnica común, sin embargo, la mayoría de los artículos de centrado vertical nunca lo mencionan y yo nunca lo había visto hasta que escarbé en la sección de comentarios de un artículo concreto.

Allí, Simon enlazó a este jsFiddle que hacía volar todos los demás métodos (el mismo método también fue mencionado por Priit en los comentarios). Investigando un poco más, tuve que usar palabras clave muy específicas para encontrar algunas otras fuentes para este método.

Al no haber usado nunca esta técnica, la puse a prueba y descubrí lo increíble que es realmente el Centrado Absoluto.

Encuentra demos adicionales, una tabla comparativa y más en CodePen.¡

Ventajas

• Cross-browser (incluyendo IE8-10)
• Sin marcas especiales, estilos mínimos
• Responsive con porcentajes y min-/max-
• Usa una clase para centrar cualquier contenido
• Centrado independientemente del padding (sin box-sizing!)
• Los bloques pueden ser fácilmente redimensionados
• Funciona muy bien en imágenes

Caveats

• La altura debe ser declarada (ver Altura Variable)
• .
• Recomendar la configuración de overflow: auto para evitar el desbordamiento de contenido (ver Desbordamiento)
• No funciona en Windows Phone

Compatibilidad con navegadores:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.El Centrado Absoluto fue probado y funciona sin problemas en las últimas versiones de Chrome, Firefox, Safari, Mobile Safari, e incluso IE8-10.

Explicación

Después de investigar las especificaciones y la documentación, esto es lo que entiendo de cómo funciona el Centrado Absoluto:

• En el flujo de contenido normal, margin: auto; es igual a ‘0’ para la parte superior e inferior.W3.org: Si ‘margin-top’, o ‘margin-bottom’ son ‘auto’, su valor usado es 0.
• position: absolute; rompe el bloque fuera del flujo de contenido típico, haciendo que el resto del contenido sea como si ese bloque no estuviera allí.Developer.mozilla.org: …un elemento que se posiciona de forma absoluta se saca del flujo y, por tanto, no ocupa espacio
• Configurar top: 0; left: 0; bottom: 0; right: 0; da al navegador una nueva caja de delimitación para el bloque. En este punto, el bloque llenará todo el espacio disponible en su padre de desplazamiento, que es el cuerpo o contenedor position: relative;. Developer.mozilla.org: Para los elementos de posición absoluta, las propiedades superior, derecha, inferior e izquierda especifican los desplazamientos desde el borde del bloque contenedor del elemento (con respecto al cual se posiciona el elemento).
• Dar al bloque un width o un height evita que el bloque ocupe todo el espacio disponible y obliga al navegador a calcular margin: auto en función del nuevo cuadro delimitador. Developer.mozilla.org: El margen del elemento se posiciona entonces dentro de estos desplazamientos.
• Como el bloque está absolutamente posicionado y, por tanto, fuera del flujo normal, el navegador da valores iguales a margin-top y margin-bottom centrando el elemento en los límites establecidos anteriormente.W3.org: Si ninguno de los tres es ‘auto’: Si tanto ‘margin-top’ como ‘margin-bottom’ son ‘auto’, resuelve la ecuación bajo la restricción extra de que los dos márgenes obtengan valores iguales. AKA: centrar el bloque verticalmente

El Centrado Absoluto parece ser el uso previsto para margin: auto; basado en la especificación y, por lo tanto, debería funcionar en todos los navegadores compatibles con los estándares.

TL;DR: Los elementos absolutamente posicionados no se renderizan en el flujo normal, por lo que margin: auto; se centra verticalmente dentro de los límites establecidos por top: 0; left: 0; bottom: 0; right: 0;.¡

Dentro del contenedor

.Center-Container { position: relative;}.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Con el Centrado Absoluto, puedes colocar tu bloque de contenido dentro de un position: relative contenedor para alinear el bloque dentro del contenedor!

El resto de las demos asumirán que estos estilos ya están incluidos y proporcionarán clases complementarias para implementar varias características.

Centro absoluto, dentro del contenedor

Esta caja está absolutamente centrada, horizontal y verticalmente, dentro de su contenedor usandoposition: relative.

Dentro de la ventana gráfica

.Absolute-Center.is-Fixed { position: fixed; z-index: 999;}

¿Quieres el bloque de contenido centrado en la ventana gráfica? Ponlo en position: fixed y dale un índice z alto, como el modal de esta página.

• Safari móvil: El bloque de contenido se centrará verticalmente en todo el documento, no en la ventana gráfica, si no está dentro de un position: relative contenedor.

Desplazamientos

.Absolute-Center.is-Right { left: auto; right: 20px; text-align: right;}.Absolute-Center.is-Left { right: auto; left: 20px; text-align: left;}

Si tienes una cabecera fija o necesitas añadir otros desplazamientos, simplemente añádelo en los estilos de tu bloque de contenido como top: 70px;. Mientras se declare margin: auto;, el bloque de contenido se centrará verticalmente dentro de los límites que declares con topleftbottom y right.

También puedes pegar tu bloque de contenido a la derecha o a la izquierda mientras lo mantienes centrado verticalmente, utilizando right: 0; left: auto; para pegar a la derecha o left: 0; right: auto; para pegar a la izquierda.

Centro vertical, alineación a la derecha

Esta caja está absolutamente centrada verticalmente dentro de su contenedor, pero pegada a la derecha conright: 0; left: auto;.

Responsive

.Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 200px; max-width: 400px; padding: 40px;}

¡Quizás el mejor beneficio del Centrado Absoluto es que los anchos/altos basados en porcentajes funcionan perfectamente! Incluso los estilos min-width/max-width y min-height/max-height se comportan como se espera de las cajas más responsivas.

Adelante, añade relleno al elemento; ¡a Absolute Centering no le importa!

Centro absoluto, basado en porcentajes

¡Esta caja está absolutamente centrada, horizontal y verticalmente, incluso con anchos basados en porcentajes & altura, min/max-, y padding!

Desbordamiento

.Absolute-Center.is-Overflow { overflow: auto;}

El contenido más alto que el bloque o el contenedor (viewport o un position: relative contenedor) se desbordará y puede derramarse fuera del bloque de contenido y del contenedor o incluso cortarse. Simplemente añadiendo overflow: auto permitirá que el contenido se desplace dentro del bloque siempre que el propio bloque de contenido no sea más alto que su contenedor (quizás añadiendo max-height: 100%; si no tienes ningún relleno en el propio bloque de contenido).

Cambio de tamaño

.Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto;}

¡Puedes cambiar el tamaño de tu bloque de contenido con otras clases o con Javascript sin tener que recalcular el centro manualmente! Añadir la propiedad resize permitirá incluso que tu bloque de contenido sea redimensionado por el usuario.

El Centrado Absoluto mantiene el bloque centrado sin importar cómo se redimensione el bloque. La configuración de min-/max- limitará el tamaño del bloque a lo que desee y evitará que desborde la ventana/contenedor.

Si no utiliza resize: both, puede añadir un transition para animar suavemente entre tamaños. Asegúrese de establecer overflow: auto ya que el bloque podría cambiar de tamaño más pequeño que el contenido.

El centrado absoluto es la única técnica de centrado vertical probada que soporta con éxito la propiedad resize: both.

Caveats

• Configura tu max-width/max-height para compensar cualquier relleno en el propio bloque de contenido, de lo contrario desbordará su contenedor.
• La propiedad resize no es compatible con los navegadores móviles ni con IE 8-10, así que asegúrate de que tus usuarios tienen una forma alternativa de cambiar el tamaño si eso es esencial para la experiencia del usuario.
• Combinar las propiedades resize y transition provoca un retraso igual al tiempo de transición cuando el usuario intenta cambiar de tamaño.

Imágenes

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image { height: auto;}.Absolute-Center.is-Image img { width: 100%; height: auto;}

¡Las imágenes también funcionan! Aplica la clase/estilo a la propia imagen y pon height: auto; como harías con una imagen de tamaño responsivo para que cambie de tamaño con el contenedor.

Nota que height: auto; funciona para las imágenes, pero hace que un bloque de contenido normal se estire para llenar el contenedor a menos que uses la técnica de altura variable. Es probable que esto se deba a que los navegadores tienen que calcular la altura para la imagen renderizada, por lo que margin: auto; acaba funcionando como si hubieras declarado la altura en todos los navegadores probados.

Altura variable

Javascript:

/* Modernizr Test for Variable Height Content */Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);});

CSS:

.absolutecentercontent .Absolute-Center.is-Variable { display: table; height: auto;}

El Centrado Absoluto sí requiere una altura declarada, sin embargo la altura puede ser porcentual y controlada por max-height. Esto lo hace ideal para escenarios responsivos, sólo asegúrese de establecer un desbordamiento apropiado.

Una forma de evitar la altura declarada es añadir display: table, centrando el bloque de contenido independientemente de la longitud del contenido. Esto causa problemas en algunos navegadores (IE y Firefox, principalmente), por lo que mi amigo Kalley de ELL Creative escribió una prueba de Modernizr para comprobar si el navegador soporta este método de centrado. Ahora puedes mejorar progresivamente

Caveats

Esto romperá la compatibilidad entre navegadores. Puede considerar una técnica alternativa si la prueba de Modernizr no satisface sus necesidades.

• No es compatible con la técnica de redimensionamiento.
• Firefox/IE8: Usando display: table alinea el bloque de contenido a la parte superior, pero sigue centrado horizontalmente.
• IE9/10: El uso de display: table alinea el bloque de contenido a la parte superior izquierda.
• Mobile Safari: El bloque de contenido se centra verticalmente, pero queda ligeramente descentrado horizontalmente cuando se utilizan anchos basados en porcentajes.

Centro absoluto, altura variable

Esta caja está absolutamente centrada verticalmente dentro de su contenedor, independientemente de la altura del contenido.

Otras técnicas

El centro absoluto es una gran solución para el centrado, pero hay otros métodos que pueden ajustarse a necesidades más específicas. Los métodos más utilizados o recomendados son los Márgenes Negativos, las Transformaciones, la Celda-Tabla, el Bloque-Inline, y ahora Flexbox. Se tratan con más profundidad en otros artículos, así que aquí sólo cubriré lo básico.

Márgenes negativos

.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */}

Tal vez la técnica más común. Si se conocen las dimensiones exactas, establecer un margen negativo igual a la mitad de la anchura/altura (más el relleno, si no se utiliza box-sizing: border-box) junto con top: 50%; left: 50%; centrará el bloque dentro de un contenedor.

Hay que tener en cuenta que este es el único método probado que funcionó como se esperaba en IE6-7.

Ventajas

• Funciona bien en todos los navegadores, incluyendo IE6-7
• Requiere un código mínimo

Caveats

• No es responsivo. No funciona para dimensiones basadas en porcentajes y no puede establecer min-/max-
• El contenido puede desbordar el contenedor
• Tiene que compensar con padding o utilizar box-sizing: border-box

Centro absoluto, Márgenes negativos

Esta caja está absolutamente centrada verticalmente dentro de su contenedor utilizando márgenes negativos.

Transformaciones

.is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

Una de las técnicas más sencillas con casi los mismos beneficios que el Centrado Absoluto, pero admite altura variable. Dale al bloque de contenido transform: translate(-50%,-50%) con los prefijos de proveedor necesarios junto con top: 50%; left: 50%; para que quede centrado.

Ventajas

• Contenido de altura variable
• Requiere un código mínimo

Caveats

• No funciona en IE8
• Necesita vendor prefijos
• Puede interferir con otros efectos transform
• Resulta en una renderización borrosa de los bordes y del texto en algunos casos

Centro absoluto, Translate(-50%,-50%)

Esta caja está absolutamente centrada verticalmente dentro de su contenedor usando translate(-50%,-50%).

Table-Cell

HTML:

<div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div></div>

CSS:

.Center-Container.is-Table { display: table; }.is-Table .Table-Cell { display: table-cell; vertical-align: middle;}.is-Table .Center-Block { width: 50%; margin: 0 auto;}

Esta puede ser la mejor técnica en general, simplemente porque la altura puede variar con el contenido y el soporte del navegador es grande. La principal desventaja es el marcado extra, que requiere un total de tres elementos para conseguir el centrado final.

Desventajas

• Contenido de altura variable
• El contenido se desborda estirando el elemento padre
• Funciona bien entre navegadores

Caveats

• Requiere marcado extra

Centro absoluto, Tabla/Tabla-Celda

Esta caja está absolutamente centrada verticalmente dentro de su display: table-cell padre, que está dentro de un display: table contenedor.

Bloque en línea

HTML:

<div class="Center-Container is-Inline"> <div class="Center-Block"> <!-- CONTENT --> </div></div>

CSS:

.Center-Container.is-Inline { text-align: center; overflow: auto;}.Center-Container.is-Inline:after,.is-Inline .Center-Block { display: inline-block; vertical-align: middle;}.Center-Container.is-Inline:after { content: ’; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */}.is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */}

Por demanda popular: Centrado de bloques en línea. La idea básica es usar display: inline-blockvertical-align: middle y un elemento psuedo para centrar tu bloque de contenido dentro de un contenedor. Mi implementación tiene algunos trucos nuevos que no he visto en otros sitios y que ayudan a resolver algunos problemas.

El ancho del bloque de contenido debe declararse para que no sea más ancho que el 100% del contenedor menos 0,25em si el contenido es más ancho que el contenedor. como un bloque con texto de párrafo largo. De lo contrario, el bloque de contenido será empujado a la parte superior, que es la razón para usar :after. Usar :before hacía que el contenido fuera empujado hacia abajo al 100%!

Si tu bloque de contenido necesita ocupar todo el espacio horizontal disponible posible, puedes añadir max-width: 99%;, que funciona para contenedores más grandes, o max-width: calc(100% - 0.25em) dependiendo de los navegadores que soporte y del ancho del contenedor.

Los beneficios son en su mayoría los mismos que la técnica de la Tabla-Celda, pero inicialmente dejé este método fuera porque es en gran medida un hack. Independientemente de ello, la compatibilidad con los navegadores es estupenda y resulta ser una técnica popular.

Ventajas

• Contenido de altura variable
• El contenido se desborda estirando el elemento padre
• Funciona bien entre navegadores, y puede ser adaptado para el soporte de IE7 (ver el CSS para ver)

Caveats

• Requiere un contenedor
• Se apoya en margin-left: -0.25em; para centrar horizontalmente correctamente, pero puede ser necesario ajustar para diferentes fuentes/tamaños
• El ancho del bloque de contenido debe ser declarado para no ser más ancho que el 100% del contenedor menos 0.25em.

Centro absoluto, bloque en línea

Esta caja está absolutamente centrada verticalmente usando display: inline-blockvertical-align: middle y un elemento psuedo.

Flexbox

.Center-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}

El futuro de la maquetación en CSS, Flexbox es la última especificación de CSS diseñada para resolver problemas comunes de maquetación como el centrado vertical. Smashing Magazine ya tiene un gran artículo sobre Centrar elementos con Flexbox que deberías leer para tener una visión más completa. Ten en cuenta que Flexbox es más que una forma de centrar, puede ser utilizado para las columnas y todo tipo de problemas de diseño locos.

Ventajas

• El contenido puede ser cualquier ancho o alto, incluso se desborda con gracia
• Puede ser utilizado para las técnicas de diseño más avanzadas.

Caveats

• No es compatible con IE8-9
• Requiere un contenedor o estilos en el cuerpo

Centro absoluto, Flexbox

Esta caja Flexbox está absolutamente centrada verticalmente dentro de su contenedor.

Recomendaciones

Cada técnica tiene sus ventajas. La elección de una u otra se reduce principalmente a los navegadores que soporta y al aspecto de su marcado existente, pero utilice la tabla de comparación para hacer la elección correcta que se ajuste a las características que necesita.

El Centrado Absoluto funciona muy bien como una solución sencilla y sin complicaciones. En cualquier lugar en el que haya utilizado márgenes negativos antes, utilice el centrado absoluto en su lugar. No tendrá que lidiar con las molestas matemáticas para los márgenes o el marcado extra, y podrá dimensionar sus cajas de forma responsiva.

Si su sitio requiere contenido de altura variable con la mejor compatibilidad con los navegadores, pruebe las técnicas Table-Cell, Inline-Block. Si estás a la última, prueba Flexbox y aprovecha las ventajas de sus técnicas de diseño avanzadas.

Más lecturas en SmashingMag:

• La guía definitiva para usar márgenes negativos
• Flexbox es tan fácil como un pastel: diseñar maquetas CSS
• El misterio de la propiedad CSS Float

.