tl; dr
垂直对齐中间作品，但是您将不得不
table-cell在父元素和
inline-block子元素上使用。
此解决方案无法在IE6和7中使用。
您的解决方案是更安全的方法。
但是由于您使用CSS3和HTML5标记了问题，所以我一直认为您不介意使用现代解决方案。
经典解决方案（表布局）
这是我最初的答案。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表布局将影响您的渲染性能，因此我建议您使用一种更现代的解决方案。
经过测试：
- FF3.5 +
- FF4 +
- Safari 5+
- Chrome 11+
- IE9 +
HTML
<div ><div >your content</div></div>
CSS
.cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center;}.inner { display: inline-block; width: 200px; height: 200px;}现代解决方案（转换）
由于现在已经很好地支持转换，因此有一种更简单的方法。
CSS
.cn { position: relative; width: 500px; height: 500px;}.inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px;}♥我最喜欢的现代解决方案（flexbox）
我现在开始越来越多地使用flexbox，它也得到了很好的支持，这是迄今为止最简单的方法。
CSS
.cn { display: flex; justify-content: center; align-items: center; }
