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>

代码演示:

202101111610334674125101-1658127239813

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;
}

代码演示:

202101111610334912120913-1658127881571