日常让文字上下居中通过margin-top或者pading-top或者line-height等，但是他们只是针对一行文字，实现上下居中，有时候我们在软件开发时候，需要让多行文字在div中上下居中，可能每个div的里面的文字行数都不一样。此时很需要使用定义容器为flex和align-items属性让多行文字在div中完美上下居中。

html代码代码如下

<el-popover
            placement="bottom-end"
            width="500"
            popper-class="popover-tips"
            trigger="hover"
          >
            <div class="tips-container tips-font">
              1、突破国际碳壁垒，满足产品出口地合规性， 享受贸易自由。<br>
              2、引导低碳产品消费，满足消费者对低碳产品的采购 需求<br>
              3、展现企业社会责任，提升产品品牌价值<br>
              4、利于分析识别高碳排放风险，选用更低碳的原料和 供应商，实现绿色产品设计
            </div>
            <div slot="reference" class="step">
              <div class="step-name">主要应用</div>
              <div class="step-desc">碳足迹的主要应用</div>
            </div>
          </el-popover>

css3代码如下

.tips-font{
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
}

注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。
注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。