水平垂直居中的实现方式有多种，请见：http://blog.csdn.net/zhouziyu2011/article/details/53514416
在支持 CSS3 属性的现代浏览器当中，可以利用CSS3的translate属性实现水平垂直居中。
尤其是当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-height/2来实现，这时候可以设置子元素的transform: translate(-50%,-50%)。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#out{
position: fixed;
width: 400px;
height: 200px;
background: red;
}
#in{
width: 50%;
height: 50%;
background: yellow;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
</html>其实，在translate 函数当中使用百分比是以该元素的content、padding、border为标准计算的。
下面给子元素加上padding 和 border：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#out{
position: fixed;
width: 400px;
height: 200px;
background: red;
}
#in{
width: 50%;
height: 50%;
border: 5px solid pink;
padding: 5px;
background: yellow;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
</html>使用 CSS3 translate 属性和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移，但存在细微差别，表现在offsetLeft 和 offsetTop 属性。
使用绝对定位、相对定位属性加上 top、left ，会影响offsetTop和 offsetLeft 的值；
使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别，即无论translate 的值为多少，这offsetTop和 offsetLeft 的值都是固定不变的。
eg1：相对定位或绝对定位+left和top属性
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: relative; /*或position: absolute;*/
width: 200px;
height: 200px;
background-color: red;
top: 100px;
left: 200px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");
console.log(container.offsetLeft);
console.log(container.offsetTop);
</script>
</body>
</html>eg2：translate属性
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: relative; /*或position: absolute;*/
width: 200px;
height: 200px;
background-color: red;
transform: translate(300px,100px);
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");
console.log(container.offsetLeft);
console.log(container.offsetTop);
</script>
</body>
</html>