方法一：

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-alignproperty 属性。
<div style=”border:1px solid red;display: table;position: relative;”>
<div style=”border:1px solid black; display: table-cell;vertical-align: middle;“>
1111
</div>
<div style=”border:1px solid yellow”>
2222<br>
2222<br>
2222<br>
</div>
</div>

借鉴https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

方法二：最高大上的一种，使用:before元素

<style type=”text/css”>
.nine {
position: absolute;
display: inline-block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 23%;
/*text-align: center;
background: rgba(0,0,0,.5);*/
}

.nine:before {
content: ”;
display: inline-block;
vertical-align: middle;
height: 100%;
}

.nine .content {
display: inline-block;
vertical-align: middle;
/* width: 60px;
height: 60px;
line-height: 60px;
color: red;
background: yellow;*/
}
</style>

<div style=”border:1px solid red;position: relative;”>
<div class=”nine” style=”border:1px solid black;”>
1111
</div>
<div style=”border:1px solid yellow;padding-left: 23%”>
2222<br>
2222<br>
2222<br>
</div>
</div>

<div style=”border:1px solid red;position: relative;”>
<div class=”nine” style=”border:1px solid black;”>
<div class=”content”>1111</div>
</div>
<div style=”border:1px solid yellow;padding-left: 23%”>
2222<br>
2222<br>
2222<br>
</div>
</div>

借鉴:https://www.zhihu.com/question/20543196