javascript - Firefox 和 Chrome $(window) 高度差异

Question

我有一个垂直放置的模态，如下所示:

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>