怎样使一个层垂直居中于浏览器中

HTML代码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; 200px; height:200px; border:1px solid red; } --> </style> <div>bany的博客</div>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

PS:
语法：

position : static | absolute | fixed | relative

参数：

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性