1、单行文本  垂直居中

<pre class="wp-block-code"><code>&lt;p&nbsp;class="text"&gt;习近平总书记指挥谋划“十四五”——关键之年 非凡部署&lt;/p&gt;</code></pre>

css样式：

<pre class="wp-block-code"><code>.text {
  font-size: 15px;
  outline: 1px dashed red;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}</code></pre>

代码演示：

2、多行文本 垂直居中

 如果设计稿的高度如果是600px，这个是你实际测量的高度值。 我们现在想让多行文本，在这个大盒子里面 垂直方向居中显示。

思路：

            把你的浏览器中当前容器里的行数，自己数出来，

            例如：8行,每一行的行高你设置的是line-height: 40px;

            8行的总高度是 = 8*40 = 320px

            （600-320）/2 = 140px ,这个140px，就是我们一会要设置的 上内边距的值。

<div class="content">
  <div class="con">
    <p>2020年，是非常之年，也是关键之年。</p>
    <p>这一年，中国将决胜全面建成小康社会、“十三五”规划收官、并实现第一个百年奋斗目标；</p>
    <p>这一年，是中国决战脱贫攻坚之年，千百年来困扰中华民族的绝对贫困问题将历史性地划上句号。</p>
    <p>这一年，是节点，也是新起点。</p>
    <p>“十四五”时期，中国将进入新发展阶段，只有牢牢把握住当前及未来一段时间的发展大势，才能锚定好发展方向、找到发展之路。</p>
    <p>新形势需要新担当、呼唤新作为。</p>
    <p>在“十四五规划”编制的过程中，习近平总书记始终亲自指挥，亲自部署，亲自推动。</p>
    <p>于变局中开新局，抓住机遇，应对挑战。如今，“十四五”规划的蓝图正在绘就，新的篇章即将开启，奋斗征程永远向前。</p>
  </div>
</div>

css样式：CSS

.content {
  width: 950px;
  height: 600px;
  outline: 1px dashed red;
  margin: 0 auto;
  padding-top: 140px;
}
.con {
  outline: 1px dashed red;
}
p {
  line-height: 40px;
}

代码演示：