垂直对齐中间作品，但是您将不得不table-cell在父元素和inline-block子元素上使用。
此解决方案无法在IE6和7中使用。 您的解决方案是更安全的方法。 但是由于您使用CSS3和HTML5标记了问题，所以我一直认为您不介意使用现代解决方案。
这是我最初的答案。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表布局将影响您的渲染性能，因此我建议您使用一种更现代的解决方案。
<div class="cn"><div class="inner">your content</div></div>
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
我现在开始越来越多地使用flex@R_869_2419@，它也得到了很好的支持，这是迄今为止最简单的方法。
.cn {
display: flex;
justify-content: center;
align-items: center;
}
602392714
清零编程群