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; 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% ; /*兼容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>