Question

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

<p:dataTable id="salesTbl" var="line" value="#{indexBean.linesList}" editable="true" editMode="cell">

Answer 1

您可以使用css psuedo元素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内

1 个答案: