552 votos

¿Cuál es la mejor manera de Centrar un div verticalmente con CSS

Quiero centrar un div verticalmente con CSS. No quiero tablas o Javascript, pero sólo CSS puro. He encontrado algunas soluciones, pero todos ellos están perdiendo Internet Explorer 6 apoyo.

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

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

576voto

Billbad Puntos 2930

Abajo es el mejor todo alrededor de la solución que se podría construir verticalmente y horizontalmente centro de un ancho fijo, flexible altura de la caja de contenido. Probado y funcionando para las últimas versiones de FF, Opera, Chrome Y Safari, y MSIE 6+.

HTML

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>
</div>
</div>

CSS

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

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

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

Para acomodar el IE 7 y mayores, utilizar una hoja de estilo con estos cambios:

<!--[if lte IE 7]><link rel="stylesheet... /><![endif]-->;
.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}

Página de prueba: http://emergentweb.com/test/valign.html

Yo construí en algún contenido dinámico a prueba la flexibilidad. Me encantaría saber si alguien ve algún problema con ella. Debería funcionar bien para centrado superposiciones también -- lightbox, pop-up, etc.

104voto

Yisela Puntos 2682

Uno más no veo en la lista:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
  • Cross-browser (incluyendo IE8-10 sin hacks!)
  • Sensible, con los porcentajes y min/max-
  • Centrada, independientemente de relleno (sin caja de tamaño!)
  • Height debe ser declarada (ver Variable Altura)
  • Configuración recomendada de desbordamiento: auto para evitar que el contenido de los efectos colaterales (ver Desbordamiento)

Fuente: Absoluta Centrado Horizontal Y Vertical En CSS

10voto

Ninx Puntos 108

Esto es siempre a donde voy cuando tengo que volver a este tema

Para aquellos que no quieren hacer el salto:

  1. Especifique el contenedor principal de la posición relativa o position:absolute.
  2. Especificar una altura fija en el contenedor secundario.
  3. Set position:absolute y superior:50% en el contenedor secundario para mover la parte superior hacia abajo a la media de los padres.
  4. Set margin-top:-yy, donde aa es la mitad de la altura del contenedor secundario para compensar el elemento.

Un ejemplo de esto en el código:

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X