Hola, que tal? 

Tengo una duda, casi problema con CSS y es que no logro mi prometido... tengo un 'momento' en mi página en que se aparecerá un recuadro blanco con x contenido y el resto de la página se tornara con un recubrimiento opaco.. todo logrado y trabajando bien hasta aquí.

La idea es que el recuadro ya mencionado quede en medio de la pantalla del visitante, este centro variando claro a partir de la resolución de cada visitante. de forma horizontal ya lo logré fácilmente con margin: auto; pero no logro hacerlo con vertical align.

Aquí una imagen para apreciarlo mejor:



y Aquí el CSS:

div#fade {
background: url(../images/fade.png) repeat !important;
height: 100%;
width: 100%;
position: fixed;
bottom: 0;
z-index: 99;
}
div#f_content {
width: 500px;
height: 300px;
background-color: #FFF;
margin: auto;
margin-top: 200px;
}
Como ven tengo margin-top pero no quiero fijar un valor (200px en este caso) ya que si por ejemplo el monitor del visitante es considerablemente grande se verá más hacia arriba y no como en esta imagen basada en otro monitor más pequeño y con la medida ajustada al caso.

Aclaro que #fade es el "recubrimiento" opaco de la página otrogado a travéz de una acción especifica, y #f_content es el recuadro blanco que quiero ALINEAR VERTICALMENTE.

Gracias desde ya! 

Puedes usar JS para ello. Calculando la altura de la pantalla (window.screenY, si no me equivoco), restándole el alto del div (parseInt(document.getElementById('f_content').style.height)) y diviendolo por dos hayas el margin-top que has de ponerle, si usas jQuery o alguna libreria similar se te simplifica el trabajo.

Gracias por tu ayuda

Uso jQuery en la web, así que lo aprovecharé... puedes decirme cuales métodos debo aplicar? ... supongo que height() es una.

Westwest.... Es "hallar" con "ll", no con "y" ._.

Es un garrafal fallo que se me ha pasado... pero no da como para que crees un mensaje sólo para eso.

Tampoco da para decir eso... xD pero bueno, no importa, te has equivocado y punto.

---

Ahora, vamos al problema:

Para hacer que quede centrado hay que hacer que el punto medio del div quede en el punto medio de la pantalla.
¿Cómo?
Pasos a seguir:
1.- Hallar el punto medio del div a centrar:
var divX = $('#f_content').width() / 2; // devuelve un numero, en PX
var divY = $('#f_content').height() / 2;

2.- Hallar el punto medio de la ventana actual:
var wX = $(window).width() / 2;
var wY = $(window).height() / 2;

3.- Poner el div en el centro:
$('#f_content').css({
top: (wY - divY) + 'px',
left: (wX - divX) + 'px',
position: 'absolute'
});

Con eso ya debería estar centrado. Si tienes alguna duda, no dudes en preguntar.

Espero que no sea porque te di el código del ejemplo sino porque entendiste como hacerlo!

Y gracias por el karma.