我们都知道css3支持flex布局，可以实现水平和垂直居中的场景。但是对于老的浏览器可能不支持flex属性，我们可以通过display: table和display: table-cell来布局。

代码片段如下：

.container {
   /* display: flex;
    align-items: center;*/
    display: table;
    width: 100%;
    height: 200px;
    background-color: red;
}

.block {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

<div class="container">
    <div class="block">
        <h1>hello</h1>
        <span>world</span>
    </div>
    <div class="block">
        <h1>Shit</h1>
        <span>HaHa</span>
    </div>
</div>