<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>居中方法</title>
<style>
/*固定宽高的div很简单，如下：*/
.div2{
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
background-color:#0000FF;
z-index:2;
}
/*非固定宽高的div，不兼容IE8/如下*/
.center {
position: absolute ;
top: 50%;
left: 50%;
background-color:#CCCCCC;
width:500px;
height: 400px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/*此方法和固定宽高的方法重复，就加了一个ie6的兼容设置：设置 position: fixed; _position:absolute;
设置 left:50% 和 top:50%;
设置 margin: -(DIV的offsetWidth/2) 0 0 -（DIV的offsetHeight/2）*/
.div3{
position: fixed;
_position:absolute; /* hack for IE6 */
z-index:1;
top: 50%;
left: 50%;
margin: -141px 0 0 -201px;
width: 400px;
height:280px;
border:1px solid #CCC;
/*line-height: 280px;*/
/*text-align:center;*/
background-color:#F4F4F4;
overflow:hidden;
}
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="center"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
</body>
</html>
