Salve!!

Mais um script da série de scripts perdidos que já desenvolvi para o fórum iMasters, e só encontrei agora.

O script tem um css simples para centralizar uma DIV horizontalmente e verticalmente.

Porém, o problema disso, é que se a área da viewport do browser, for menor (menos alta ou menos larga), que as dimensões da tua DIV, essa DIV começa a ‘se esconder’, para dentro do overflow da viewport.

Para resolver essa questão, disparei no evento onresize da janela, uma rotina javascript que calcula as margens, se essas forem menores que o necessário, e então reposiciona a DIV alí no centro.

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
window.onload = function(){
	calcMarginTop();
}
window.onresize = function(){
	calcMarginTop();
}
function calcMarginTop()
{
	var main = id('main');
	var marginTopo = parseInt( getMarginTop( main ) );
	var marginBaixo = parseInt( getMarginBottom( main ) );


	if( main.offsetTop < -1 )
		main.style.marginTop = '-'+( parseInt( main.offsetTop ) - marginTopo )+'px';
	else if( marginTopo!=marginBaixo )
	main.style.marginTop = '-248px';
}
function getMarginTop( el )
{
	if( window.getComputedStyle )
		return document.defaultView.getComputedStyle(el, null).marginTop;
	else if( el.currentStyle )
		return el.currentStyle['marginTop'];
}
function getMarginBottom( el )
{
	if( window.getComputedStyle )
		return document.defaultView.getComputedStyle(el, null).marginBottom;
	else if( el.currentStyle )
		return el.currentStyle['marginBottom'];
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#main {
	border: 1px solid #000;
	height: 500px;
	width: 500px;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -250px;
	position: absolute;
}
</style>
</head>
<body>
	<div id="main">

	</div><!-- /main -->
</body>
</html>

Bom, é isso. Comentem! Gostaria de ouvir sugestões.