CSS vertical y horizontalmente Div

Question

Tengo una ventana emergente que contiene un formulario ASP.NET, haga clic en el enlace "Solicitar información" y aparecerá el formulario.

Sin embargo, las páginas que tienen el enlace "Solicitar información" para activar la ventana emergente tienen mucho contenido, por lo tanto, se necesita desplazarse para ver el vínculo.

Necesito tener el div siempre centrado si un usuario se desplaza para leer el contenido; de lo contrario, si no se desplaza la ventana emergente aún aparece centrada en la pantalla.

El div se coloca absolutamente, todo el ancho de página es 960px con margen establecido en 0 auto.

Answer 1

Si el div tiene un ancho fijo y el uso altura: (si width = 120px y la altura = 80px)

position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -60px; /* negative half of the width */ 
margin-top: -40px; /* negative half of the height */ 

Answer 2

Utilice una posición: fija; para esto, usa 0 para arriba, izquierda, derecha e inferior, y dale al div una pantalla: table-cell; también, así, estableciendo text-align: center; y vertical-alinear: medio; hará que todo lo que está adentro aparezca exactamente en el medio, sin hackeo exacto de píxeles como márgenes negativos.

Answer 3

Si su div emergente tiene un tamaño fijo, puede utilizar este CSS:

position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
margin: auto; /* this requires a fixed size */ 

De lo contrario, tiene que juguetear con la pantalla: table-cell; y similares.

Answer 4

¿Esto es lo que estás tratando de hacer? http://jsfiddle.net/Hrwf8/

La clave aquí es establecer los estilos izquierdo y superior al 50% y establecer el margen izquierdo y superior a la cantidad negativa de la mitad del ancho y alto del div. Esto, por supuesto, requiere que tengas un tamaño fijo para tu div.

Answer 5

En tu CSS:

.ClassCenter { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Fuente: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html