使用 inline-block 水平垂直居中任意内容

html

<!-- 注释用于去除 inline-block `间隙` -->
<div class="container"><!--
--><div class="center">
<h2>这个是居中标题</h2>
<p>这里是一些文字，文字</p>
</div><!--
--></div>

css

.container {
text-align: center;
width: 100%;
height: 300px;
}
.container:before,
.container:after    /* :after 可以不需要 */
{
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
.center {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}