居中内联块-调整窗口大小后，Chrome忽略css顶部位置，错误？

我试图通过以下方式使用垂直居中：

在我从更高的分辨率调整Chrome窗口以满足mediaQueries（最小宽度：500px）的要求之前，一切都正常

.windowOverlay_container {
    display: block;
}

@media all and (min-width: 500px) {
    .windowOverlay_container {
        display: inline-block;
    }
}

whiteBox的父级从一个内联块更改为另一个块（然后whiteBox位于左侧），并且仍然可以（whiteBox垂直居中），但从Chrome调整大小后，忽略父级上的“顶部：50%”，whiteBox不再居中

当元素更改显示时，只需Chrome忽略顶部位置：通过mediaQueries将块转换为内联块。

---

（我不想使用显示：表格/表格单元格。）

（当我一直只使用“display:inline block”时，就没有问题了。-它解决了我在项目中的问题）

删除：

top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

并加上：

-webkit-transform: translateY(25%);
-moz-transform: translateY(25%);
-ms-transform: translateY(25%);
-o-transform: translateY(25%);
transform: translateY(25%)

---

如果设置“translateY（25%）”，则框不会垂直居中。Chrome错误报告-

-webkit-transform: translateY(25%);
-moz-transform: translateY(25%);
-ms-transform: translateY(25%);
-o-transform: translateY(25%);
transform: translateY(25%)