嗨，我正在尝试创建一个模式对话框。我需要将其垂直和水平居中。不幸的是，我不能使用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>.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句