垂直居中

HTML

<div class="toast-container">
  <div class="toast">测试十二个字提交成功状态</div>
</div>



CSS

.toast-container {
  position: fixed;
   100%;
  height: 100%;
  left: 100%;
  top: 100%;
}
.toast {
  position: absolute;
  top: -50%;
  left: -50%;
  transform: translate(-50%, -50%);
   auto;
  max- 12em;
  padding: 13px 16px;
  font-size: 14px;
  color: #ccc;
  background-color: rgba(37, 38, 45, 0.9);
  border-radius: 2px;
}
原文地址:https://www.cnblogs.com/yangyang03/p/6247642.html