方式一：display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！
这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，
效果如下图：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<style>
.section-table{
display: table;
height: 400px;
background: #f90;
}
.text-center{
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="section-table">
<div class="text-center">
<h3 style="padding:10px 20px;">科技生活</h3>
<p style=" margin-bottom: 30px;font-size: 16px;padding:0 20px;line-height: 24px;">DJI 带屏遥控器配备新一代 OcuSync 2.0 高清图传系统，可以适配“御”Mavic 2 等采用 OcuSync 2.0 高清图传系统的飞行器<sup>[1]</sup>。
拥有 5.8GHz 和 2.4GHz 两个通信频段，系统可以根据环境干扰情况的不同在 2.4GHz 与 5.8GHz 双频段之间自动选频和切换，有效降低环境干扰对飞行操控和图像画质的影响，并带来远达 8 公里<sup>[2]</sup>的图传距离。</p>
</div>
</div>
</body>
</html>
方式二：flex实现div内容水平垂直居中
效果如下图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
display: flex;
display: -webkit-flex;
border: 1px solid #0000FF;
height: 200px;
width: 400px;
align-items:center;
justify-content:center;
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}
</style>
</head>
<body>
<div id="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
方式三：css3内容水平垂直居中transform: translate(-50%,-50%)
效果如下图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.border_box{
position: relative;
width:500px;
height: 300px;
margin:10px;
border: 1px solid #00C1B3;
}
#box{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:;
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}
</style>
</head>
<body>
<div class="border_box">
<div id="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
