html - 一个元素在另一个元素之上，但居中，具有文本缩放和固定宽度和高度？

Question

如何将一个元素放在另一个元素之上，但仍然具有固定大小？我试过这个，但它不限制宽度和中心文本。当有很多符号时，文本会超出边界。

另外，如何根据容器的宽度缩放文本？

html {
  background-color: gray;
  color: white;
}

.alarm {
  position: relative;
  float: right;
  width: 369;
  height: 123;
  padding: 5%;
}

.message {
  margin: 5px;
  word-break: break-all;
  background-color: black;
  text-align: center; /* doesn't work */
  /* font scaling depending on the number of characters..? */
}

.message-container {
  max-width: 246px;
  max-height: 123px; /* doesn't work */
  position: absolute;
}

.video {
  background-color: yellow;
  width: 369px;
  height: 123px;
}

<div class="alarm">
  <div class="message-container">
    <div class="message">
      {name} is now following! fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    </div>
  </div>
  <div class="video-container">
    <!--there must have been a video-->
    <div class="video"></div>
  </div>
</div>

标签： htmlcsscss-position