绝对中心 jquery return 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>

绝对中心 jquery return margin-left 0

Absolute center with jquery return margin-left 0

javascript

jquery

absolute

centering