Pregunta ¿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.

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

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


1097
2017-12-28 12:57


origen


Respuestas:


A continuación se muestra la mejor solución versátil que pude construir para centrar vertical y horizontalmente un ancho fijo, altura flexible cuadro de contenido. 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*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Ver un ejemplo de trabajo con contenido dinámico

Construí un 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: lightbox, pop-up, etc.


1133
2018-05-31 03:13



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 ser declarado (ver Altura variable)
  • Ajuste recomendado overflow: auto para evitar el derrame de contenido (ver Desbordamiento)

Fuente: Centrado horizontal y vertical absoluto en CSS


244
2017-08-13 03:08



La forma más simple sería la siguiente 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%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>


163
2017-12-17 18:30



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;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Aquí está el resultado


126
2017-12-28 15:15



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 por 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;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

El soporte comienza con IE8.


73
2018-02-20 21:05



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% */
}

49
2018-05-19 12:04



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 id="vh" class="box">Div to be aligned vertically</div>

Otra opción es usar la caja flexible revisa el enlace del violín.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Otra opción es usar una transformación CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>


31
2017-08-13 04:06