¿Cómo puedo centrar verticalmente un elemento div para todos los navegadores que usan CSS?

Quiero centrar divverticalmente con CSS. No quiero tablas ni JavaScript, solo CSS puro. Encontré algunas soluciones, pero a todas les falta compatibilidad con Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

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

Dec 28 '08 19:12 Burak Erdem

A continuación se muestra la mejor solución integral que pude crear para centrar vertical y horizontalmente un cuadro de contenido de ancho fijo y altura flexible . Fue probado y funcionó para versiones recientes de Firefox, Opera, Chrome y Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Expandir fragmento

Vea un ejemplo práctico con contenido dinámico

Creé contenido dinámico para probar la flexibilidad y me encantaría saber si alguien ve algún problema con él. También debería funcionar bien para superposiciones centradas: caja de luz, ventana emergente, etc.

May 31 '2011 03:05 Billbad

La forma más sencilla serían las siguientes tres líneas de CSS:

1) posición: relativa;

2) arriba: 50%;

3) transformar: traducirY(-50%);

A continuación se muestra 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%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Expandir fragmento

Dec 17 '2014 18:12 DrupalFever

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!)
Responsivo con porcentajes y min-/max-
Centrado independientemente del relleno (¡sin tamaño de caja!)
heightdebe ser declarado (ver Altura variable )
Configuración recomendada overflow: autopara evitar el desbordamiento de contenido (consulte Desbordamiento)

_{Fuente: Centrado absoluto horizontal y vertical en CSS}

Aug 13 '2013 03:08 Yisela

Ahora bien, la solución Flexbox es una forma muy sencilla para los navegadores modernos, por lo que te recomiendo esta:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

body,
html {
  height: 100%;
}

<div class="container">
  <div>Div to be aligned vertically</div>
</div>

Expandir fragmento

Dec 15 '2016 13:12 Santosh Khalse

En realidad, necesitas dos div para el centrado vertical. El div que contiene el contenido debe tener un ancho y un 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;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Expandir fragmento

Aquí está el resultado .

Dec 28 '2008 15:12

Editar 2020: use esto solo si necesita admitir navegadores antiguos como Internet Explorer 8 (lo cual debe negarse a hacer 😉). Si no, utilice Flexbox .

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

Gracias a Chris Coyier de CSS Tricks por este artículo .

html, body{
  height: 100%;
  margin: 0;
}
.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;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Expandir fragmento

El soporte comienza con Internet Explorer 8.

Feb 20 '2014 21:02 Armel Larcier