Question

我有一个模态I垂直位置如下：

method.center = function () {
    var top, left;
    top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
    left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

    $modal.css({
        top:top + $(window).scrollTop(), 
        left:left + $(window).scrollLeft()
    });
};

无论窗口高度如何，Firefox在最高计算时始终为+ 157px。他们都水平中心。是否有更好，更一致的方法来找到窗口的高度，减去模态的高度并除以2？

Answer 1

你真的需要使用JS计算吗？因为它只能通过CSS实现这一点，如下所示：

.container {
    border: 3px solid #73AD21;

    display: flex;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.center {
    margin: auto;
}

<div class="container">
  <div class="center">
    <b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.
  </div>
</div>

Firefox和Chrome $（窗口）高度差异

1 个答案: