Html Safari：在固定分区内垂直居中分区

我目前有一个问题只出现在safari中（但还没有在IE中测试）。我正在创建一个lightbox，其中有一个全尺寸的固定容器和一个流体内部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;
    }

正文
.订购集装箱{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：999；
背景#d7d7d7；
}
.内部订单{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转化：translateY（-50%）；
文本对齐：居中；
}

您可以使用css psuedo元素、

显示：内联块

和

垂直对齐：中间

来实现这一点

（）

---

这很有效，你知道用这种方法水平居中的最好方法吗？使用

文本对齐：居中将宽度设置为99%有效，但显然99%并不理想。哦，你说得对，必须删除干扰的残留样式。谢谢
.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%;
}