Div horizontalmente central y verticalmente central

Quiero alinear un div horizontalmente central y verticalmente medio de body de una página.Div horizontalmente central y verticalmente central

El css:

.loginBody { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
.loginDiv { 
    position: absolute; 
    left: 35%; 
    top: 35%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
}

Y tengo este código HTML:

<body class="loginBody"> 
    <form id="form1"> 
    <div class="loginDiv"> 

    </div> 
    </form> 
</body>

Ahora se está comportando como lo quiero, pero si puedo cambiar el tamaño del navegador, se hizo completamente distorsionada, tal vez esto es porque el posicionamiento absoluto. Estoy mostrando algunas de las capturas de pantalla: en Firefox redimensionado: enter image description here

en cromo redimensionada: enter image description here

en decir redimensionado: enter image description here

en ventana maximizada es: enter image description here

¿Hay alguna manera de resolver este problema y lograr esta alineación centrada utilizando el posicionamiento relativo?

Gracias.

Editar:

en Firefox sin barra de desplazamiento aparece al cambiar el tamaño pero aparece en otros navegadores. enter image description here

Fuente

2012-03-11 Tapas Bose

Prueba esto:

.loginDiv { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
    margin-left: -273px; /*half width*/ 
    margin-top: -132px; /*half height*/ 
}

lo mueve hacia el centro, y de vuelta a la izquierda y por la mitad de las dimensiones - que centrarán que incluso en cambiar el tamaño

Fuente

2012-03-11 15:47:22 StilgarBF

Gracias por la ayuda. ahora está trabajando pero un problema en Firefox th No hay barra de desplazamiento al redimensionar, pero está presente en otros navegadores. He actualizado mi pregunta. Por favor, míralo. –

si no desea barras de desplazamiento, simplemente agregue 'overflow: hidden' al cuerpo – StilgarBF

no, quiero la barra de desplazamiento, así que configuré' overflow: auto' en el cuerpo pero todavía no hay una barra de desplazamiento como se muestra. –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

Esto es un método común para centrar un div. Lo coloca absolutamente, luego lo mueve hasta la mitad y la mitad hacia abajo. Luego ajuste la posición con los márgenes a la mitad de las dimensiones del div que está colocando.

Como referencia (este usa el posicionamiento fijo, aunque para mantener el div en su lugar incluso cuando se desplaza, útil cuando se hace popups modales .. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Fuente

2012-03-11 15:47:29 Greg

Gracias por ayuda. ahora está funcionando pero hay un problema en Firefox: no hay barra de desplazamiento al redimensionar, pero está presente en otros navegadores. He actualizado mi pregunta. Por favor, míralo. –

http://jsfiddle.net/mAVd6/2/ ¿Esto básicamente refleja cómo está construida su página? ¿Produce barras de desplazamiento en Firefox? ¿otros navegadores? - si intercambias absolutamente con fijo, ¿qué pasa con las barras de desplazamiento? – Greg

Si cambié la posición a absoluta a fija, no aparece la barra de desplazamiento en ningún navegador. –

Hacer un div que es para el contenido de la página y hacer una " contenido" clase con el siguiente CSS. Esto funcionó para mí en jQuery móvil con Phonegap para los dispositivos Android. Espero que ayuda a alguien.

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

Fuente

2012-08-07 17:49:06

Div horizontalmente central y verticalmente central

Respuesta

Cuestiones relacionadas