DIV水平垂直居中，非IE瀏覽器可以用CSS3來處理，IE瀏覽器中分別處理IE6和/IE7、IE8、IE9。
在IE低版本中，雖然大致上沒有問題，但還是有一些細微的顯示問題。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 12px;
font-family: tahoma;
margin: 10px;
padding:0;
}
.box {
border: 1px solid #f09;
background-color: #fcf;
width: 520px;
height: 360px;
position: relative;
overflow: hidden;
}
.sub-box {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.con {
*position: relative; /* 星號兼容 IE6/IE6 */
*top: -50%;
*left: -50%;
margin: -50% 50% -50% -50% \0; /*兼容IE8（IE9也受影響，在下面處理掉IE9）*/
border: solid 1px #f00;
}
:root .con {
margin: auto; /*兼容處理IE9*/
}
</style>
</head>
<body>
<div id="ver"></div>
<div class="box">
<div class="sub-box">
<div class="con">
DIV垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//顯示瀏覽器版本
document.getElementById('ver').innerHTML = navigator.userAgent;
</script>