CODEWITHSUNDEEP
javascriptjquerycssbrowser
Dirty Bird Design
Dirty Bird Design

Reputation: 5523

Firefox and Chrome $(window) height differences

I have a modal I position vertically like this:

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()
    });
};

No matter the height of the window, Firefox is always + 157px on the top calculation. They both center horizontally fine. Is there a better, more consistent way to find the height of the window, subtract the height of the modal and divide by 2?

Upvotes: 0

Views: 95

Answers (1)

VadimB
VadimB

Reputation: 5711

Are you really need to use JS calculation? Because it can achieve this with CSS only, like this:

.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>

Upvotes: 1

Related Questions