jQuery返回margin-left 0的绝对中心

Question

我为一个网站设计了一个 JQuery 插件，目的是帮助一个具有绝对位置的元素居中，使用像素而不是百分比。 当页面开始时，元素垂直居中但不水平居中（margin-left=0）。当我在控制台中使用相同的脚本时，我应用到一个元素并且它可以工作。

附加函数的代码：

$(document).ready(function() {
$(element).psfCenter();
});

功能：

(function ($){
    // center element
    $.fn.psfCenter=function(orientation){   
         return this.each(function() {
            var widthParent=$(this).parent().width()/2;
            var heightParent=$(this).parent().height()/2;
            var widthElement=$(this).width()/2;
            var heightElement=$(this).height()/2;
            var left=widthParent-widthElement;
            var top=heightParent-heightElement;
            console.log(orientation)
            switch(orientation){
                case"x":
                $(this).css({
                'position':'absolute',
                'margin-left':left,
                })
                break;

                case "y":
                $(this).css({
                'position':'absolute',
                'margin-top':top
                })
                break;

                default:
                $(this).css({
                'position':'absolute',
                'margin-left':left,
                'margin-top':top
                })
                break;
            }   
        });
    };
})(jQuery);

Answer 1

我会给元素left 50%，然后margin-left 宽度的一半。 这是因为您可能希望它在较小的设备上工作（响应式）。

类似这样的：http://jsfiddle.net/bsxqmL6f/

$.fn.psfCenter = function(orientation) {
    return this.each(function() {
        var self = $(this);
        var inner_width = self.width();
        var inner_height = self.height();
        var set_absolute = function() {
            self.css('position', 'absolute');
        }        
        var set_left = function() {
            self.css({
                'left': '50%',
                'margin-left': '-' + (inner_width * .5) + 'px'
            }); // faster than deviding by 2
        };
        var set_top = function() {
            self.css({
                'top': '50%',
                'margin-top': '-' + (inner_height * .5) + 'px'
            }); // faster than deviding by 2
        };
        
        set_absolute();
        switch(orientation) {
            case 'x':
                set_top();
                break;
            case 'y':
                set_left();
                break;
            default:
                set_left();
                set_top();
                break;
        }
    });
}

$('.center-me').psfCenter();

.center-me {
    width: 50px;
    height: 50px;
    background-color: red;
}

.huge {
    width: 250px;
    height: 250px;
    background-color: yellow;
}

.smaller {
    width: 120px;
    height: 120px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="center-me huge"></div>
<div class="center-me smaller"></div>
<div class="center-me"></div>