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-这些前缀。