html代码:
<div class="father"><p>我要垂直居中</p>   </div>css代码:
.father {display:flex;align-items: center;background:grey;height:100vh;
}

 html代码:
<div class="father"><p>我要垂直居中</p>   </div>css代码:
.father {display:flex;align-items: center;   //交叉轴justify-content:center;  //主线background:grey;height:100vh;
}

.father {background:grey;height:100vh;position: relative;
}p{position: absolute;top:50%;   //50%并不是居中的，因为它是以元素的上border为标准移动50%的transform:translateY(-50%)  //所以我们需要像上移动元素自身高度一半儿的距离
}

.father {background:grey;height:100vh;position: relative;
}p{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

p{background-color:red;height:30px;line-height:30px;
}

p{background-color:red;padding:30px 0;
}

.father {background:grey;height:100vh;  position: relative;
}p{background-color:red;position: absolute;width:100px;height:50px;top:calc(50% - 25px)
}

.father {background:grey;height:100vh;  position: relative;
}p{background-color:red;position: absolute;width:100px;height:50px;top:calc(50% - 25px);left:calc(50% - 50px)
}

.father {background:grey;height:100vh; position: relative;
}p{width:100px;height:100px;background-color:red;position: absolute;top:0;bottom:0;margin:auto;
}

.father {background:grey;height:100vh; position: relative;
}p{width:100px;height:100px;background-color:red;position: absolute;top:0;bottom:0;left:0right:0;margin:auto;
}

<div class="father"><div class="son">我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中</div></div>//CSS代码
.father {display: table-cell;vertical-align: middle;height: 100vh;background: grey;}.son {width: 200px;
}

  <div class="father"><div class="son">我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，</div><img src="https://cdn2.ettoday.net/images/4031/d4031158.jpg" width=200></div>.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid;
}img {border: green 1px solid;
}

.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid; vertical-align: middle;
}img {border: green 1px solid;vertical-align: middle;
}

.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid; vertical-align: top;margin-top: 25px;
}img {border: green 1px solid;vertical-align: top;
}