¿Cómo puedo centrar verticalmente un elemento div para todos los navegadores que usan CSS?
Quiero centrar div
verticalmente 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 div
verticalmente en todos los principales navegadores, incluido Internet Explorer 6?
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>
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.
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>
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!)
height
debe ser declarado (ver Altura variable )- Configuración recomendada
overflow: auto
para evitar el desbordamiento de contenido (consulte Desbordamiento)
Fuente: Centrado absoluto horizontal y vertical en CSS
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>
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>
Aquí está el resultado .
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>
El soporte comienza con Internet Explorer 8.