Safari：在固定 div 内垂直居中 div

Question

我目前遇到的问题只出现在 safari 中（虽然还没有在 IE 中测试过）。我正在创建一个灯箱，其中有一个全尺寸的固定容器和一个流体内部 div。问题是在 safari 中，内部容器位于页面顶部而不是垂直居中。我目前在 safari 中遇到另一个问题，所以也许我只是在本地遇到 safari 问题，但我宁愿先看看社区。目前看起来像这样：

<div class="order-container">
    <div class="order-inner">
        <h2>Text</h2>
        <input type="text" />
    </div>
</div>

     .order-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: #d7d7d7;
    }
    .order-inner {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
    }

Answer 1

您可以使用 css 伪元素，display: inline-block 和 vertical-align: middle 来实现。

(Demo)

.order-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #d7d7d7;
    height: 100%;
    text-align: center;
}
.order-inner,
.order-container::after {
    display: inline-block;
    vertical-align: middle;
}
.order-container::after {
    content: "";
    height: 100%;
}

Safari：在固定 div 内垂直居中 div

Safari: vertically center div inside a fixed div

html

css

safari