效果图如下
注意：本文只讲了些 vertical-align 的应用，其基本原理 以及 应用原理见张鑫旭大神的讲解（我对CSS vertical-align的一些理解与认识）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
CSS深入理解vertical-align和line-height的基友关系：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box1{
width: 200px;
height: 200px;
border: solid 1px #f0f;
margin: 20px auto;
text-align: center;
}
.box1 i{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.box1 span{
vertical-align: middle;
}
.box2{
width: 200px;
height: 200px;
border: solid 1px #f0f;
margin: 20px auto;
text-align: center;
}
.box2 i{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.box2 div{
display: inline-block;
vertical-align: middle;
text-align: left;
}
</style>
</head>
<body>
<!-- 单行居中 -->
<div class="box1">
<i></i>
<span>是啦放假啊是了发动机</span>
</div>
<div style="width: 100%; height: 10px"></div>
<!-- 多行居中 -->
<div class="box2">
<i></i><div>
<h3>爱上对方</h3>
<span>撒发生的发生地方</span>
</div>
</div>
<!-- 多行居中 -->
<div class="box2">
<i></i><div>
<h3>爱上对方</h3>
<span>撒发生的发生地方生的发生地方生的发生地方生的发生地方</span>
</div>
</div>
</body>
</html>