Javascript 将图像源设置为document ready后，使用JQuery将图像居中

我有一个关于HTML/JQuery用法中函数同步的问题：

我有一个简单的html文件，例如

<div id="wrapperA" style="top: 50%">
    <span id="wordfortargetpic1"></span>
    <span id="wordfortargetpic2"></span>
    <span id="wordfortargetpic3"></span>
    <img id="pic1" class="imgdiv" src="" />
    </div>
  </div>

现在，由于图像的大小可以变化，我编写了一个JQuery函数，通过获取元素的尺寸和调整边距来居中元素：

function css_center(object) {
  object.css({
    "margin-left": -($(object).width() / 2),
    "margin-top": -($(object).height() / 2)
  });
}

我现在的问题是，如果我用

设置

src

对中

img

它不工作（即，它不使图像居中）。 但是，如果我在控制台中运行css_center函数，它确实可以工作

我怀疑这与函数的运行方式有关，我缺少了其中的一部分

为了解决这个问题，我尝试通过构建一个只设置src的函数来绕过这个问题，该函数名为

getImage（）

，并使用一个回调函数来调用该函数，该回调函数以图像为中心，如下所示：

getImage(function(){
  css_center($(".imgdiv"));    
})

---

也不行。这里缺少什么？

使用两个div，一个用于水平对齐，一个用于垂直对齐，如下所示：

div.horizontal {
    display: flex;
    justify-content: center;
}

div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div class="horizontal" id="wrapperA" style="top: 50%">
    <div class="vertical">
        <span id="wordfortargetpic1"></span>
        <span id="wordfortargetpic2"></span>
        <span id="wordfortargetpic3"></span>
        <img id="pic1" class="imgdiv" src="" />
    </div>
</div>

div.horizontal{
显示器：flex；
证明内容：中心；
}
垂直分区{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}

确保在加载映像后运行函数

$('#pic1').on('load', function(){
    this.style.marginTop = -(this.height/2) + 'px';
    this.style.marginLeft = -(this.width/2) + 'px';
})

---

为什么不使用纯css将图像居中？这样，无论图像大小如何，它都将始终居中。@MeisamMulla如果我不知道图像的宽度和高度，而不为每个图像编写css居中，我该怎么做？我希望它尽可能通用。@ben_aaron只需为

imgdiv

类编写CSS。@SpencerWieczorek我已经添加了CSS，希望它能澄清我的问题。我不知道显示的是哪幅图像，也不知道图像的高度或宽度。请将居中功能连接到

#pic1

上的

onload

事件。因此，您的函数仅在加载图像后运行，以获得正确的尺寸

$('#pic1').on('load', function(){
    this.style.marginTop = -(this.height/2) + 'px';
    this.style.marginLeft = -(this.width/2) + 'px';
})