Centering a div in firefox with jQuery

Question

So I am attempting to use the following code to center a div in the window using jQuery:

(function($) {
    $.fn.extend({
        center: function(options) {
            var options = $.extend({ // Default values
                inside: window,
                // element, center into window
                transition: 0,
                // millisecond, transition time
                minX: 0,
                // pixel, minimum left element value
                minY: 0,
                // pixel, minimum top element value
                withScrolling: true,
                // booleen, take care of the scrollbar (scrollTop)
                vertical: true,
                // booleen, center vertical
                horizontal: true // booleen, center horizontal
            }, options);
            return this.each(function() {
                var props = {
                    position: 'absolute'
                };
                if (options.vertical) {
                    var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                    if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                    top = (top > options.minY ? top : options.minY);
                    $.extend(props, {
                        top: top + 'px'
                    });
                }
                if (options.horizontal) {
                    var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                    if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                    left = (left > options.minX ? left : options.minX);
                    $.extend(props, {
                        left: left + 'px'
                    });
                }
                if (options.transition > 0) $(this).animate(props, options.transition);
                else $(this).css(props);
                return $(this);
            });
        }
    });
})(jQuery);

This works fine in Chrome but it doesn't seem to vertically center in firefox and I can't figure what I am doing wrong. Is there a bug with firefox that would render it unable to calculate the window height?

have you tried adding styles such as `margin-left: auto;` and `margin-right: auto;` to the element? — ClydeFrog, Sep 27 '12 at 19:27
I would but I use the script to center a number of different elements in different situations and a CSS based solution won't always be practical. Also, I would like to recenter any time a user resizes their window. — Thomas, Sep 27 '12 at 19:29
possible duplicate of [Using jQuery to center a DIV on the screen](http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen) — Nope, Sep 27 '12 at 19:33

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

Try this:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
    return this;
}

Usage:

$(element).center();

Source

edited May 23 '17 at 12:27

Community

1
1

answered Sep 27 '12 at 19:30

Johan

35,120
54
178
293

I saw this solution as well but it has the same issue with firefox. – Thomas Sep 27 '12 at 19:34
@Thomas I've used this myself in both chrome, ie and ff and it's working as intended. Could you provide some example html + css where its not working? – Johan Sep 27 '12 at 19:37
you should do: $(element).center(); and then add a resize handler to ur window: $(window).resize(function() { $(element).center(); }); I have some (I tell u, an ugly designed example) but you might find some stuff in the js code: http://student.devine.be/nicholas.olivier/20112012/CMDII/CHAIN/dokter.html – Nicholas Sep 27 '12 at 20:09

score 0 · Accepted Answer · answered Sep 27 '12 at 19:36

I can't remember what I've changed but here it is:

$.fn.extend({
    center: function(options) {
        var options = $.extend({ // Default values
            inside: window,
            // element, center into window
            transition: 0,
            // millisecond, transition time
            minX: 0,
            // pixel, minimum left element value
            minY: 0,
            // pixel, minimum top element value
            withScrolling: true,
            // booleen, take care of the scrollbar (scrollTop)
            vertical: true,
            // booleen, center vertical
            horizontal: true // booleen, center horizontal
        }, options);

        $(this).each(function() {
            var props = {
                position: 'absolute'
            };
            if (options.vertical) {
                var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                top = (top > options.minY ? top : options.minY);
                $.extend(props, {
                    top: top + 'px'
                });
            }
            if (options.horizontal) {
                var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                left = (left > options.minX ? left : options.minX);
                $.extend(props, {
                    left: left + 'px'
                });
            }
            if (options.transition > 0) $(this).animate(props, options.transition);
            else $(this).css(props);

        });

        return $(this);
    }
});

It seems to work fine in firefox: http://jsfiddle.net/NQRUF/4/

Centering a div in firefox with jQuery

2 Answers2