纯CSS实现居中显示的自适应信息框

一、前言

最近写前端，为了不至于让界面出锅需要写禁用JavaScript时的提示框，就发现界面设计很适合使用那种屏幕居中显示的提示信息。同时由于需要自适应文本内容，最终使用纯CSS实现了效果。

二、实现

首先我们需要实现一个自适应内容的容器并通过position: fixed将其屏幕居中。但是此时的居中并非完全居中（容器会偏右且偏下）。
因此还需要再放置一个子元素，使其通过position: relative将位置偏移父元素的一半，并在该元素中处理实际的信息框样式。

.msg-container {
  z-index: 12;
  position: fixed;
  left: 50%;
  bottom: 50%;
}
.msg-bar {
  z-index: 12;
  padding: 1em;
  font-size: 24px;
  border-radius: 5rem;
  background-color: rgba(0,0,0,0.35);
  position: relative;
  left: -50%;
  top: -50%;
}