Centrar verticalmente div con altura dinámica y 100% de ancho [duplicado]

Posible duplicado:
¿Cómo puedo centrar verticalmente el texto en un div dinámicamente alto?

¿Cómo centrar verticalmente div con altura dinámica y 100% de ancho en la ventana del navegador?

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

donde el registro de inicio de sesión tiene 100% de ancho y alto dinámico

preguntado el 12 de junio de 12 a las 20:06

4 Respuestas

Respuesta corta: no puedes.

Respuesta larga: si conoce la altura, puede usar un posicionamiento fijo, un top:50% y margin-top igual a menos la mitad de la altura. Aparte de eso, puede usar algunos JS básicos para calcular cuál es el margin-top debe basarse en la offsetHeight. Si está centrado verticalmente en otro elemento, en lugar de la ventana, puede hacer lo mismo pero con una posición absoluta siempre que el contenedor no esté en una posición estática.

Respondido el 12 de junio de 12 a las 20:06

Este usuario dice la verdad. Además, por experiencia personal, un margen superior establecido de 50 px a 150 px generalmente se ve mucho mejor que un cuadro centrado verticalmente. La razón es que, por lo general, el ojo escaneará desde la parte superior de la página hacia abajo, por lo que un margen grande en la parte superior afectará al usuario mucho más que un margen grande en la parte inferior. - ryan kinal

@RyanKinal - Muy cierto. Si quieres hacerlo, es posible, pero en mi opinión, no es una elección de diseño muy inteligente. - Anthony Atkinson

De hecho, Kolink es correcto, pero no requiere mucho trabajo. Todo lo que se necesita es CSS y JavaScript inteligentes (utilicé jQuery en mi ejemplo a continuación) para que funcione.

<div class="login-signup-page">
<div class="login-signup">Sample Text</div>
</div>​

.login-signup-page {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:grey;
}

.login-signup {
    width:100%;
    background:white;
    position:absolute;
    top:50%;
}
​

$(document).ready(function() {
   $('.login-signup').css('margin-top', -$('.login-signup').outerHeight() + 'px'); 
});​

Demo

Respondido el 12 de junio de 12 a las 20:06

Además, tenga en cuenta que si el contenido es más largo que la ventana, es posible que pierda parte de su contenido por desbordamiento. - Anthony Atkinson

Es posible que desee considerar outerHeight() en lugar de height(), para tener en cuenta el relleno y el borde. - ryan kinal

¿Puedo preguntar cuál es el razonamiento para multiplicar la altura por -1 cuando podrías simplemente abofetear a un - ¿en frente de eso? - Niet el oscuro Absol

@Kolink, solo una diferencia en la forma en que escribimos y leemos;) Ambos funcionan, ¿no? - Anthony Atkinson

Supongo que tengo aversión a ver a dos de esos operadores uno al lado del otro. nada malo con *-1, por supuesto, solo preferencia personal. Y dos bytes menos :p - Niet el oscuro Absol

Consulte las ejemplo de jsFiddle o vaya directamente al siguiente código:

HTML

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

CO

.login-signup-page {

 /* Position at top of page */
 position:fixed;
 top:0;

 /* Position halfway down page (in supporting browsers) */
 -moz-transform:translate(0, 50%);
 -webkit-transform:translate(0, 50%);
 -ms-transform:translate(0, 50%);
 -o-transform:translate(0, 50%);
 transform:translate(0, 50%);

 /* Prevent hidden content */
 height:100%;
 width:100%;

}

.login-signup {

 /* Prevent hidden content */
 max-height:100%;
 max-width:100%;
 overflow:auto;

 /* Position in center of page (in supporting browsers) */
 -moz-transform:translate(0, -50%);
 -webkit-transform:translate(0, -50%);
 -ms-transform:translate(0, -50%);
 -o-transform:translate(0, -50%);
 transform:translate(0, -50%);

}

Nota: En navegadores que no son compatibles translate(), el contenido aparecerá en la parte superior de la página (en lugar de estar recortado, tenía top:50%; sido utilizado en su lugar).

Respondido el 19 de junio de 12 a las 21:06

Necesitará Javascript o jQuery para obtener la altura del elemento y la ventana del navegador, luego calcule en función de esos números. Algo como esto:

$(document).ready(function() {
    var signupHeight = $('.login-signup').height(); // height of your dynamic element
    var winHeight = $(window).height(); // height of the browser window
    $('.login-signup').css('margin-top',(winHeight - signupHeight) / 2); // subtract one height from the other, then divide by 2 so the top and bottom margins are equal
});

Respondido el 12 de junio de 12 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.