DIV水平垂直居中的CSS兼容写法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>