移动端CSS设置文字始终居中显示

需求

移动端要求弹窗显示如图：

先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (max-375px) {
      html {
        font-size: 44px
      }
    }

    @media screen and (min-375px) and (max-414px) {
      html {
        font-size: 50px
      }
    }

    @media screen and (min-414px) {
      html {
        font-size: 55px
      }
    }
    * {
      margin: 0;
      padding: 0;
    }
    html,body {
       100%;
      height: 100%;
      position: relative;
    }

    body {
      background-color: #ccc;
    }

    .m_container {
      position: absolute;
       100%;
      height: 100%;
      left: 0;
    }

    .m_content {
       80%;
      height: 5rem;
      border-radius: 10px;
      background-color: #fff;
      text-align: center;
      position: absolute;
      left: 10%;
      top: 50%;
      transform: translateY(-50%);
    }

    .m_content h4 {
      margin: 11% 0 4%;
      font-size: .34rem;
    }

    .m_zytz {
       46%;
      margin-top: 4%;
      margin-bottom: 1%;
    }

    .m_content .e_text {
      display: block;
      color: #000;
      height: 4rem;
      font-size: .28rem;
      line-height: .45rem;
      text-align: left;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .e_item {
       84%;
      margin-left: 8%;
      color: #878787;
      font-size: .24rem;
      display: flex;
      text-align: left;
    }

    .e_item_title {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .e_text8888 {
      display: inline-block;
      font-size: 0.5rem;
      margin-bottom: 1px;
      vertical-align: bottom;
    }

    .e_texty {
      font-size: 0.36rem;
    }
  </style>
</head>
<body>
  <div class="m_container">
    <div class="m_content">
      <h4>重要通知</h4>
      <div class="e_text">
        <div class="e_top_text">
          截止2020年12月31日24时，集齐所<br>有勋章的幸运儿将<span style="color: #ee2a29;font-weight: bold;">可获得【战斗基】</span>
        </div>
        <div style="color: #ee2a29;font-weight: bold;margin-bottom: 2%;">
          勋章，瓜分&nbsp;<span class="e_text8888">8888</span><span class="e_texty">元</span>&nbsp;现金大奖！
        </div>
        <div class="e_item">
          <span class="e_item_title">领奖时间：</span>
          <span class="e_item_text">2021年1月4日15时 - <br>2021年1月10日17时</span>
        </div>
        <div class="e_item">
          <span class="e_item_title">领奖路径：</span>
          <span class="e_item_text">活动首页【勋章墙】- <br>点击【战斗基】勋章</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

问题

要求适应不同尺寸的移动端设备，在写的过程中就出现了以下问题：

问题：文字换行的问题，导致左右两侧不能对齐。
解决：使用了br换行，随之出现了下边这个问题。
问题：使用br换行后，由于弹窗m_content设置了宽度，有的设备中的一行文字并没有占满弹窗，会导致文字显示偏左。
解决：去掉m_content的宽度，并设置e_text如下css：
```
position: absolute;
left: 50%;
transform: translateX(-50%);  //让文字居中显示
white-space: nowrap; //设置文字不换行
```
问题：文案中“8888”的数字和汉字底部不齐。
解决：设置“8888” vertical-align: bottom;并且上下微调：margin-bottom: 1px;
问题：“领奖时间”“领奖路径”两段文字使用了flex布局，某些设备“领奖时间”4个字出现了换行，我们希望实现“领奖时间”在任何设备都不换行，并且所占宽度刚好为这4个字的宽度。
解决：给“领奖时间”设置了不换行，同时设置flex-shrink: 0;即希望该容器在任何时候都不被压缩，代码如下：
```
.e_item_title {
  flex-wrap: nowrap;
  flex-shrink: 0;
}
```
上面代码中的flex-shrink: 0;也可以用 auto;或者flex-basis: auto;来替换，这也同样可以达到我们的目的。

如果子容器的 flex-basis 设置为 auto(width 也可以)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。

补充：

MDN中white-space
MDN中flex-shrink