css - 如何在没有 flex 或 transform 的情况下使对话框居中

Question

您好，我正在尝试创建一个模态对话框。我需要将它垂直和水平居中。不幸的是，我不能使用 flex 或 transform，因为这需要在 Android 4.2 上查看时才能工作。

我找到了通过设置对话框的宽度和高度来工作的解决方案。不过，我也不能使用这些方法，因为对话框消息是可变的，所以有时它可能跨越多行，并且对话框需要更大。

有人知道怎么做吗？

我下面的代码示例显示了到目前为止我所拥有的，除了对话框未居中这一事实之外，它非常棒。

.modal {
  background: rgba(0,0,0,.6);
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  position:fixed;
}

.modal-dialog {
  background-color:#fff;
  display:inline-block;
  padding:1em;
  border-radius: 5px;
}

.message {
  
}

<div class="modal">
  <div class="modal-dialog">
      <p class="message">Your pin has been saved</p>
      <button>Ok</button>
  </div>
</div>

Answer 1

使用 centering in the unknown技术:

.modal {
  background: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  text-align: center; /* Center horizontally */
}
.modal:before { /* Center vertically, part 1 */
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.modal-dialog {
  background-color: #fff;
  display: inline-block;
  vertical-align: middle; /* Center vertically, part 2 */
  padding: 1em;
  border-radius: 5px;
}

<div class="modal"><!-- Remove this space between .modal and .modal-dialog
 --><div class="modal-dialog">
        <p class="message">Your pin has been saved</p>
        <button>Ok</button>
    </div>
</div>