1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12:

body {
  text-align: center;
}

#container {
  margin: 0 auto;
  margin-top: 25%;
  width: 400px;
  text-align: left;
}

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14:

<script type="text/javascript">
window.onresize = function() {
	var o = document.getElementById('container'); var x, y;

	if (self.innerHeight) { y = self.innerHeight; x = self.innerWidth; }
	else if (document.documentElement && document.documentElement.clientHeight) { y = document.documentElement.clientHeight; x = document.documentElement.clientWidth; }
	else if (document.body) { y = document.body.clientHeight; x = document.body.clientWidth; }

	o.style.marginTop = (y < o.offsetHeight) ? 0 : Math.round(o.offsetHeight/2)*-1+'px';
	o.style.top = (y < o.offsetHeight) ? 0 : '50%';
	o.style.marginLeft = (x < o.offsetWidth) ? 0 : Math.round(o.offsetWidth/2)*-1+'px';
	o.style.left = (x < o.offsetWidth) ? 0 : '50%';
}
</script>

1: 
2: 
3: 
4: 
5: 
6:

#container {
	position:absolute;
	width:500px; height:400px;
	left:50%; top:50%;
	margin:-200px 0 0 -250px; 
}

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9:

body {
  text-align:center; /* IE5 zentrieren */
  min-width:500px; /* nicht links abschneiden */
}
#container {
  width:500px;
  margin:0 auto; /* andere zentrieren */
  text-align:left /* wieder normal setzen, weil sich das vererbt */
}

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11:

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