以前工作碰到这个问题，但不知道具体怎么解决，看了正美的博客测试下，果然有效，
<!DOCTYPE html>
<html>
<head>
<title>百分比居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.center {
position: absolute;
left: 50%;
top: 50%;
/*Internet Explorer 10、Firefox、Opera 支持 transform 属性。*/
transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);/* Safari and Chrome */
-moz-transform:translate(-50%,-50%); /* Firefox */
-ms-transform:translate(-50%,-50%); /* IE 9 */
-o-transform:translate(-50%,-50%);/* Opera */
/*
甚至不要定义
比如：Height 可以缺省!
*/
width: 40%;
height: 50%;
/*height: auto;*/
background: red;
}
</style>
</head>
<body>
<div class="center">11111111111</div>
</body>
</html>
原文：http://www.cnblogs.com/heboliufengjie/p/4178830.html