Tips: 本文创建于2016年1月5日,已超过 2 年,内容或图片可能已经失效!

html

<div class="center">您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!</div>  

css

.center{  
position: absolute;  
top: 50%;  
left: 50%;  
width:50%;  
height:30%;  
padding:20px;  
text-align:center;  
background:#393;  
color:#fff;  
transform: translate(-50%, -50%);  
}  

如果你直接复制代码无法使用,请添加-webkit-transform或-moz-transform前缀,案例中我使用了-prefix-free这个插件,插件作用就是不需要输入-moz-和-webkit-这些前缀。