Question

您好，我正在尝试创建一个模态对话框。我需要垂直和水平居中。不幸的是，我无法使用flex或转换，因为在Android 4.2上查看时需要这样做。

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

任何人都知道怎么做？

下面的代码示例显示了我目前所拥有的内容，除了对话框不居中之外，它还很棒。

＆＃13;

.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 {
  
}

＆＃13;

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

＆＃13;

Answer 1

使用centering in the unknown技术：

"filesGlob": [
"**/*.ts",
"!node_modules/**/*",
"firebase3.d.ts"
],

.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;
}

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

1 个答案: