Cómo centrar verticalmente divs?

Esto se puede hacer con 3 líneas de CSS y es compatible con (e incluyendo) IE9:

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

Ejemplo: http://jsfiddle.net/cas07zq8/

Crédito

Puede alinear verticalmente un div en otro div. Vea este ejemplo en JSFiddle o considere el siguiente ejemplo.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

El margen de .innerDiv debe estar en este formato: margin: auto *px;

[Donde, * es el valor deseado.]

display: inline-flex es compatible con los navegadores más recientes (versión actualizada/actual) compatibles con HTML5.

puede Que no funcione en Internet Explorer :P :)

Siempre intente definir una altura para cualquier div alineado verticalmente (es decir, innerDiv) para contrarrestar los problemas de compatibilidad.

Llego bastante tarde a la fiesta, pero se me ocurrió esto a mí mismo y es uno de mis trucos rápidos favoritos para la alineación vertical. Es una locura simple, y fácil de entender lo que está pasando.

Se utiliza el atributo css :before para insertar un div en el comienzo del div padre, darle display:inline-block y vertical-align:middle y luego dar esas mismas propiedades al div hijo. Dado que vertical-align es para la alineación a lo largo de una línea, esos divs en línea se considerarán una línea.

Hacer el :before div height:100%, y el div niño seguirá automáticamente y se alineará en el medio de una línea "muy alta"."

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

Aquí hay un violín para demostrar de lo que estoy hablando. El div hijo puede ser de cualquier altura, y nunca tendrá que modificar sus márgenes / rellenos.
Y aquí hay un violín más explicativo.

Si no te gusta :before, siempre puedes introducir manualmente un div.

<div class="parent">
    <div class="before"></div>
    <div class="child">
        content
    </div>
</div>

Y luego reasignar .parent:before a .parent .before

Si conoces la altura, puedes usar posicionamiento absoluto con un negativo margin-top así:

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

De lo contrario, no hay una forma real de centrar verticalmente un div con solo CSS

He encontrado este sitio útil: http://www.vanseodesign.com/css/vertical-centering / Esto funcionó para mí:

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

El comentario de@GáborNagy en otro post fue la solución más simple que pude encontrar y funcionó como un encanto para mí, ya que trajo un jsfiddle lo estoy copiando aquí con una pequeña adición:

CSS:

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

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

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

Si también desea alinearlo horizontalmente, debe agregar otro div "inner-cell " dentro del div" cell", y darle este estilo:

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

En mi firefox y chrome funciona esto:

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

La alineación vertical siempre ha sido complicada.

Aquí he cubierto algún método para alinear verticalmente un div.

Http://jsfiddle.net/3puHE /

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

Http://jsfiddle.net/dvL512e7 /

A menos que el div alineado tenga una altura fija, intente usar el siguiente CSS para el div alineado:

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}

Necesitaba especificar min-height

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em

Si está utilizando el div de altura fija, puede usar padding-top de acuerdo con su necesidad de diseño. o puedes usar top: 50%. si estamos usando div que vertical align no funciona así que usamos relleno superior o posición según necesidad.

Encontré una manera que funciona muy bien para mí. El siguiente script inserta una imagen invisible (igual que bgcolor o un gif transparente) con una altura igual a la mitad del tamaño del espacio en blanco de la pantalla. El efecto es una alineación vertical perfecta.

Supongamos que tiene un div de encabezado (height=100) y un div de pie de página (height=50) y el contenido del div principal que desea alinear tiene una altura de 300:

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>   

Coloca el script justo antes del contenido que desea ¡alinéense!

En mi caso el contenido que me gustaba alinear era una imagen (width=95%) con una relación de aspecto de 100:85 (width:height).Lo que significa que la altura de la imagen es del 85% de su ancho. Y el Ancho es el 95% del ancho de la pantalla.

Por lo tanto, usé:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

Combina este script con

<body onResize="window.location.href = window.location.href;">

Y tienes una alineación vertical suave.

Espero que esto funcione para usted también!

Centrar los elementos secundarios en un div. Funciona para todos los tamaños de pantalla

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

<div id="parent">
    <div id="child">Content here</div>
</div>

Para más detalles, puede visitar este enlace

La forma más sencilla de centrar el elemento div es usar esta clase con las siguientes propiedades.

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

¿Has probado este?

.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}

Espero que esto ayude

Los Divs no se pueden alinear verticalmente de esa manera, sin embargo, puede usar márgenes o posición:relativa para modificar su ubicación.