Cómo centrar verticalmente divs?

Estoy tratando de crear un pequeño cuadro de entrada de nombre de usuario y contraseña.

Me gustaría preguntar, ¿cómo alineas verticalmente un div?

Lo que tengo es:

Username
Password

¿Cómo puedo hacer que el div con ID Username and Form se alinee verticalmente al centro? He intentado poner:

 vertical-align: middle; 

en CSS para el div con id. Login, pero parece que no funciona. Cualquier ayuda sería apreciada.

El mejor enfoque en los navegadores modernos es usar flexbox:

 #Login { display: flex; align-items: center; } 

Algunos navegadores necesitarán prefijos de proveedor. Para navegadores más antiguos sin soporte de flexbox (ej. IE 9 y menor), necesitarás implementar una solución alternativa utilizando uno de los métodos más antiguos .

Lectura recomendada

  • Soporte del navegador
  • Una guía para Flexbox
  • Uso de cajas flexibles de CSS

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

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

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

crédito

Puedes alinear verticalmente un div en otro div. Vea este ejemplo en JSFiddle o considere el ejemplo a continuación.

HTML

 
My Vertical 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 su valor deseado.]

display: inline-flex es compatible con los últimos navegadores (versión actualizada / actual) con soporte HTML5.

Es posible que no funcione en Internet Explorer: P 🙂

Intente siempre definir una altura para cualquier div alineado verticalmente (es decir, innerDiv) para contrarrestar problemas de compatibilidad.

Llego bastante tarde a la fiesta, pero se me ocurrió esto y es uno de mis hacks rápidos preferidos para la alineación vertical. Es completamente simple y fácil de entender lo que está pasando.

Utiliza el atributo :before css para insertar un div en el comienzo del div principal, dale display:inline-block y vertical-align:middle y luego da esas mismas propiedades al div infantil. Dado que vertical-align es para la alineación a lo largo de una línea, los divs en línea se considerarán una línea.

Haga la :before height:100% div height:100% , y el div infantil automáticamente seguirá 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 infantil 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 le gusta :before , siempre puede poner manualmente un div.

 
content

Y luego simplemente reasignar .parent:before de .parent .before

Si conoce la altura, puede usar el posicionamiento absoluto con un margin-top negativo margin-top como el siguiente:

 #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 manera real de centrar verticalmente un div con solo CSS

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

HTML

 
Content here

CSS

 #parent { padding: 5% 0; } #child { padding: 10% 0; } 

El comentario de @GaborNagy en otra publicación fue la solución más simple que pude encontrar y funcionó como un encanto para mí, ya que trajo una jsfiddle. La 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:

 
Content goes here

Si también desea alinearlo horizontalmente, debe agregar otra 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 esto funciona:

CSS:

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

La alineación vertical siempre ha sido difícil.

Aquí he cubierto algún método de alineación vertical de un div.

http://jsfiddle.net/3puHE/

HTML:

 
Table method
Flex method
Position method
Margin method

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 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 la altura mínima

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

si está utilizando una altura de corrección de fragmentación de la que puede usar la cubierta acolchada según su necesidad de diseño. o puedes usar top: 50%. si utilizamos div que vertical, la alineación no funciona, por lo que utilizamos el relleno superior o la posición según las necesidades.

Encontré una manera que funciona 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 espacio en blanco de la pantalla. El efecto es una alineación vertical perfecta.

Supongamos que tiene un encabezado div (alto = 100) y un pie de página div (alto = 50) y el contenido en el div principal que le gustaría alinear tiene una altura de 300:

  

¡Coloca el script justo antes del contenido que desea alinear!

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

Por lo tanto, utilicé:

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

Combina este script con

  

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; } 
Content here

para más detalles, puede visitar este enlace

La forma más simple de centrar su 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.