Question

我正在尝试将margin-top和margin-left值设置为元素各自大小的一半，以便将其居中。然而，它在左侧和顶部只有50％。

    var $img = document.getElementsByClassName('box'); 
    var $width = $img.clientWidth;
    var $height = $img.clientHeight;
    $('#overlay').append('<div id="boxOverlay"></div>');
    $('#boxOverlay').css('position', 'fixed');
    $('#boxOverlay').css('top', '50%');
    $('#boxOverlay').css('margin-top', '-$height/2');
    $('#boxOverlay').css('left', '50%');
    $('#boxOverlay').css('margin-left', '-$width/2');
    $('#boxOverlay').css('max-height','80%');
    $('#boxOverlay').css('max-width','90%');
    $('#boxOverlay').height($height);
    $('#boxOverlay').width($width);

Answer 1

试试这个：

var $img = $('.box');
var $width = $img.width();
var $height = $img.height();
// ...
$('#boxOverlay').css('margin-top', (($height / 2) * -1));
$('#boxOverlay').css('margin-left', (($width / 2) * -1));

Fiddle

此外，将样式对象传递给css方法是最佳实践：

var styles = {
    'margin-top': (($height / 2) * -1),
    'margin-left': (($width / 2) * -1)
};

$('#boxOverlay').css(styles);

使用这种方法，您只需查询一次DOM，就可以避免多次重绘和/或重排（需要引用）。

Answer 2

在jquery中 margin-left是marginLeft 取下仪表板的中间部分你可以尝试

$('#boxOverlay').css('marginTop', '-$height/2');
$('#boxOverlay').css('maxHeight','80%');
$('#boxOverlay').css('maxWidth','90%');

Answer 3

删除要使用的变量周围的单引号。通过在变量周围添加引号，您实际上是将函数[.css（）]传递给字符串文字而不是变量。

MDN - Strings

根据变量设置jQuery .css（）

3 个答案: