¿Cómo centrar verticalmente un div para todos los navegadores?

Quiero centrar un div verticalmente con CSS. No quiero tablas ni JavaScript, solo CSS puro. Encontré algunas soluciones, pero a todas les falta soporte para Internet Explorer 6.

  
Div to be aligned vertically

¿Cómo puedo centrar un div verticalmente en todos los principales navegadores, incluido Internet Explorer 6?

A continuación se muestra la mejor solución versátil que pude construir para centrar vertical y horizontalmente una caja de contenido de altura flexible y ancho fijo. Fue probado y funciona para las versiones recientes de Firefox, Opera, Chrome y Safari.

 .outer { display: table; position: absolute; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; } .inner { margin-left: auto; margin-right: auto; width: 400px; /*whatever width you want*/ } 
 

The Content

Once upon a midnight dreary...

Uno más que no puedo ver en la lista:

 .Center-Container { position: relative; height: 100%; } .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: solid black; } 
  • Navegador cruzado (incluido Internet Explorer 8 – ¡Internet Explorer 10 sin hacks!)
  • Sensible con porcentajes y mín. / Máx.
  • Centrado independientemente del relleno (¡sin tamaño de caja!)
  • height debe declararse (ver Altura de la variable )
  • overflow: auto configuración recomendado overflow: auto para evitar el derrame de contenido (ver Desbordamiento)

Fuente: Centrado horizontal y vertical absoluto en CSS

La forma más simple sería las siguientes 3 líneas de CSS:

 position: relative; top: 50%; transform: translateY(-50%); 

Lo siguiente es un ejemplo:

 div.outer-div { height: 170px; width: 300px; background-color: lightgray; } div.middle-div { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 
 
Test text

En realidad, necesitas dos div para el centrado vertical. El div que contiene el contenido debe tener ancho y alto.

 #container { position: absolute; top: 50%; margin-top: -200px; /* half of #content height*/ left: 0; width: 100%; } #content { width: 624px; margin-left: auto; margin-right: auto; height: 395px; border: 1px solid #000000; } 
 

Centered div

Este es el método más simple que encontré y lo uso todo el tiempo ( demostración jsFiddle aquí )

Gracias Chris Coyier de CSS Tricks para este artículo .

 .v-wrap{ height: 100%; white-space: nowrap; text-align: center; } .v-wrap:before{ content: ""; display: inline-block; vertical-align: middle; width: 0; /* adjust for white space between pseudo element and next sibling */ margin-right: -.25em; /* stretch line height */ height: 100%; } .v-box{ display: inline-block; vertical-align: middle; white-space: normal; } 
 

This is how I've been doing it for some time

Después de mucha investigación finalmente encontré la solución definitiva. Funciona incluso para elementos flotados. Ver fuente

 .element { position: relative; top: 50%; transform: translateY(-50%); /* or try 50% */ } 

Ahora la solución FlexBox es una manera muy fácil para los navegadores modernos, así que lo recomiendo para usted:

 .container{ display: flex; align-items: center; justify-content: center; height: 100%; } body, html{ height:100%; } 
 
Div to be aligned vertically

Para centrar el div en una página, revisa el enlace del violín .

 #vh { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box{ border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 100px; height: 100px; background: white; } 
 
Div to be aligned vertically

Solución Flexbox

Notas
1. El elemento padre recibe el nombre de clase.
2. Agregue prefijos de proveedor flexible si sus navegadores compatibles lo requieren.

 .verticallyCenter { display: flex; align-items: center; } 
 
Element centered vertically

Desafortunadamente, pero no sorprendentemente, la solución es más complicada de lo que uno desearía. También desafortunadamente, necesitarás usar divs adicionales alrededor del div que deseas centrado verticalmente.

Para los navegadores compatibles con estándares como Mozilla, Opera, Safari, etc., debe configurar el div externo para que se muestre como una tabla y el div interno para que se muestre como una celda de tabla , que luego puede centrarse verticalmente. Para Internet Explorer, debe colocar el div interno dentro del div externo y luego especificar el top como 50% . Las siguientes páginas explican bien esta técnica y proporcionan algunos ejemplos de código:

  • Centrado vertical en CSS
  • Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7) (ya no está activo)
  • Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7) (Artículo archivado cortesía de Wayback Machine)

También hay una técnica para hacer el centrado vertical usando JavaScript. La alineación vertical del contenido con JavaScript y CSS lo demuestra.

Si alguien se preocupa solo por Internet Explorer 10 (y posterior), use flexbox :

 .parent { width: 500px; height: 500px; background: yellow; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .centered { width: 100px; height: 100px; background: blue; } 
 

Una forma moderna de centrar un elemento verticalmente sería usar flexbox .

Necesita un padre para decidir la altura y un niño para centrar.

El siguiente ejemplo centrará un div en el centro dentro de su navegador. Lo que es importante (en mi ejemplo) es establecer la height: 100% para body y html y luego min-height: 100% para su contenedor.

 body, html { background: #F5F5F5; box-sizing: border-box; height: 100%; margin: 0; } #center_container { align-items: center; display: flex; min-height: 100%; } #center { background: white; margin: 0 auto; padding: 10px; text-align: center; width: 200px; } 
 
I am center.
 .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* (x, y) => position */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } .vertical { position: absolute; top: 50%; //left: 0; transform: translate(0, -50%); /* (x, y) => position */ } .horizontal { position: absolute; //top: 0; left: 50%; transform: translate(-50%, 0); /* (x, y) => position */ } div { padding: 1em; background-color: grey; color: white; } 
  
Vertically left
Horizontal top
Vertically Horizontal

Centrar solo verticalmente

Si no te importa Internet Explorer 6 y 7, puedes usar una técnica que involucre dos contenedores.

El contenedor externo:

  • debería tener display: table;

El contenedor interno:

  • debería tener display: table-cell;
  • debería tener vertical-align: middle;

El cuadro de contenido:

  • debería tener display: inline-block;

¡Puede agregar cualquier contenido que desee al cuadro de contenido sin preocuparse por su ancho o alto!

Manifestación:

 body { margin: 0; } .outer-container { position: absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; } .centered-content { display: inline-block; background: #fff; padding: 20px; border: 1px solid #000; } 
 
Malcolm in the Middle

Aquí es donde voy cuando tengo que volver a este tema .

Para aquellos que no quieren dar el salto:

  1. Especifique el contenedor padre como position:relative o position:absolute .
  2. Especifique una altura fija en el contenedor secundario.
  3. Establecer position:absolute y top:50% en el contenedor secundario para mover la parte superior hacia abajo al centro del elemento principal.
  4. Establecer margin-top: -yy donde yy es la mitad de la altura del contenedor secundario para compensar el elemento hacia arriba.

Un ejemplo de esto en el código:

  ... 

Hey look! I'm vertically centered!

How sweet is this?!

La solución más fácil es la siguiente:

 .outer-div{ width: 100%; height: 200px; display: flex; } .inner-div{ margin: auto; text-align:center; } 
 
Hey there!

Acabo de escribir este CSS y para saber más, por favor vaya a: Este artículo con alineamiento vertical de cualquier cosa con solo 3 líneas de CSS .

 .element { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } 

El siguiente enlace presenta una forma simple de hacerlo con solo 3 líneas en su CSS:

Vertical alinea cualquier cosa con solo 3 líneas de CSS .

Créditos a : Sebastian Ekström .

Sé que la pregunta ya tiene una respuesta, sin embargo, vi utilidad en el enlace por su simplicidad.

La respuesta de Billbad solo funciona con un ancho fijo del div .inner . Esta solución funciona para un ancho dynamic al agregar el atributo text-align: center al .outer div.

 .outer { position: absolute; display: table; width: 100%; height: 100%; text-align: center; } .middle { display: table-cell; vertical-align: middle; } .inner { text-align: center; display: inline-block; width: auto; } 
 
Content

Sé que las respuestas ya están dadas, pero creo que ese enlace puede ser útil para la alineación central en todos los casos: howtocenterincss.com

Las tres líneas de código que usan transform funcionan prácticamente en los navegadores modernos e Internet Explorer:

 .element{ position: relative; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } 

Estoy agregando esta respuesta ya que encontré algo incompleto en la versión anterior de esta respuesta (y Stack Overflow no me permite simplemente comentar).

  1. el pariente ‘posición’ estropea el estilo si el div actual está en el cuerpo y no tiene div contenedor. Sin embargo, parece que ‘arreglado’ funciona, pero obviamente arregla el contenido en el centro de la ventana gráfica posición: relativa

  2. También utilicé este estilo para centrar algunos divs superpuestos y descubrí que en Mozilla todos los elementos dentro de este div transformado habían perdido sus bordes inferiores. Posiblemente un problema de renderizado. Pero agregar solo el relleno mínimo a algunos de ellos lo procesa correctamente. Chrome e Internet Explorer (sorprendentemente) prestaron las cajas sin necesidad de relleno mozilla sin almohadillas interioresmozilla con almohadones

Lo hice con esto (cambie el ancho, la altura, el margen superior y el margen izquierdo en consecuencia):

 .wrapper { width:960px; height:590px; position:absolute; top:50%; left:50%; margin-top:-295px; margin-left:-480px; } 
-- Content --

No responde por la compatibilidad del navegador, pero también menciona la nueva cuadrícula y la característica no tan nueva de Flexbox.

Cuadrícula

De: Mozilla – Documentación de cuadrícula – Alinee div verticalmente

Compatibilidad con navegador: compatibilidad con navegador de cuadrícula

CSS:

 .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". aa ." ". aa ."; } .item1 { grid-area: a; align-self: center; justify-self: center; } 

HTML:

 
Item 1

Flexbox

Compatibilidad con el navegador: compatibilidad con el navegador Flexbox

CSS:

 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; 

Especialmente para divs parentales con altura relativa (desconocida), el centrado en la solución desconocida funciona muy bien para mí. Hay algunos ejemplos de código realmente agradables en el artículo.

Fue probado en Chrome, Firefox, Opera e Internet Explorer.

 /* This parent can be any width and height */ .block { text-align: center; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 300px; } 
 

Some text

Any other text..."

Creo que es una solución sólida para todos los navegadores sin usar flexbox – “align-items: center;” es una combinación de display: table y vertical-align: middle ;.

CSS

 .vertically-center { display: table; width: 100%; /* optional */ height: 100%; /* optional */ } .vertically-center > div { display: table-cell; vertical-align: middle; } 

HTML

 
some text

‣Demo: https://jsfiddle.net/6m640rpp/

Encuentro este más útil … da el diseño más preciso de “H” y es muy simple de entender.

El beneficio de este marcado es que define el tamaño de su contenido en un solo lugar -> “Contenido de la página”.
Los colores del fondo de la página y sus márgenes horizontales se definen en sus divs correspondientes.

 
my content goes here...

Y aquí con CSS separado:

 
my content goes here...
#PageLayoutConfiguration{ display: table; width: 100%; height: 100%; position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } #PageBackground{ display: table-cell; vertical-align: middle; background-color: purple; } #PageHorizontalMargins{ style="width: 100%; background-color: seashell; } #PageContent{ width: 1200px; height: 620px; margin: 0 auto; background-color: grey; }

El contenido se puede centrar fácilmente utilizando flexbox. El siguiente código muestra el CSS para el contenedor dentro del cual los contenidos deben estar centrados:

 .absolute-center { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } 

Esta solución funcionó para mí si tienes un elemento de bloque (por ejemplo). Usé los colores para aclarar la solución.

HTML:

 

As you can the the element/box is vertically centered

Blue Box

CSS:

 main { position: relative; width: 400px; height: 400px; } .skin_orange { outline: thin dotted red; background: orange; } .bigBox { width: 150px; height: 150px; position: absolute; top: 50%; transform: translateY(-50%); } .skin_blue { background-color: blue; } 

Demostración del código JSFiddle

Yo uso esto. Funciona en Internet Explorer 8 y posterior:

height:268px – para display:table actúa como altura mínima.

CSS:

 * { padding: 0; margin: 0; } body { background: #cc9999; } p { background: #f0ad4e; } #all { margin: 200px auto; } .ff-valign-wrap { display: table; width: 100%; height: 268px; background: #ff00ff; } .ff-valign { display: table-cell; height: 100%; vertical-align: middle; text-align: center; background: #ffff00; } 

HTML:

  

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?

Solo hazlo: agrega la clase en tu div :

 .modal { margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 240px; } 

Y lea este artículo para una explicación. Nota: la Height es necesaria.

Intereting Posts