Javascript div内图像的垂直中间对齐？

可能重复：

好的，这就是我想要做的：

• 我有一个空的div（一个盒子），几乎没有高度
• 我正在发出一个AJAX请求，向其中加载一些内容
• 在加载内容之前，我想在一个典型的旋转gif中显示“ajax加载”

我设法做到了：

• 将

  img

  水平居中（将其放入另一个

  div

  中，使用

  text align:Center；

  ）

剩下什么：

• 能够给空的div增加一些高度（简单）
• 垂直对齐图像，使其显示在框的最中间。（我完全不知道该怎么做。我目前正在设置一个上限，它适用于一个特定的盒子，但如果盒子已经有不同的高度，它就不起作用了…）

---

你会怎么做？？（任何可能的想法都是可以接受的。CSS/JavaScript……）

在图像样式中添加一些边距顶部，使其在div的中间对齐。假设div是50px的高度，并且您的图像具有5px的高度。然后让你的边距为20px，把它放在中间。

< P>不要忘记表格单元格不是正确的用法。您不希望图像被列为表格单元格，因为表格单元格应该只包含表格数据。 只是升起警告旗。坚持语义

最好使用另一个线程的答案。 这：

祝你好运

基本思想是使用

显示：表格单元格然后
垂直对齐：中间

HTML

这样，图像的放置将不依赖于容器的尺寸。它也可以调整到水平中心。您只需使用jQuery添加
.stuff{margin:0auto；}

//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>

//JS
$.fn.centeringIn = function(){
 var pere = this.parent();
 (pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
 this.css({
  'position' : 'absolute',
  'top' : ( pere.height() - this.height() )/2+'px',
  'left' : ( pere.width() - this.width() )/2+'px'
 });
}

$(document).ready( function() {
 $('.loader').centeringIn();
});

//HTML
//JS
$.fn.centeringIn=函数（）{
var pere=this.parent（）；
（pere.css（“position”）=“static”）？pere.css（“position”、“relative”）：pere.css（“position”）；
这个是.css({
'位置'：'绝对'，
'top'：（pere.height（）-this.height（））/2+'px'，
'左'：（pere.width（）-this.width（））/2+'px'
});
}
$（文档）.ready（函数（）{
$（'.loader'）.centering（）；
});
这是OP目前正在做的事情，并且已经提到这在一般情况下不起作用，因为包含的
div
可能有不同的维度（比如说，在先加载其他内容之后）。@zhihao看起来像是在我发布了这个答案后他将其编辑到了帖子中。对不起，但我没有看到任何迹象表明这个问题被编辑过（不是为了让你产生怀疑）。尽管如此，您的答案可以在之后进行编辑，以适应更新后的问题。考虑到图像的高度是
5px
，我认为在您的示例中，
margintop
也应该是
22.5px
，这可能听起来很挑剔；这可能就是我要做的。
<div class="container">
    <div class="holder">
        <img class="stuff" src="path/to/image.png">
    </div>                
</div>

.container{ 
    /* the container in which image is placed */
    height:         300px;
    margin:         0 auto;
    width:          200px;
}

.holder{
    display:        table-cell;
    width:          100%;
    vertical-align: middle;
    height:         inherit;
}

.stuff{
    display:        block;
}

//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>

//JS
$.fn.centeringIn = function(){
 var pere = this.parent();
 (pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
 this.css({
  'position' : 'absolute',
  'top' : ( pere.height() - this.height() )/2+'px',
  'left' : ( pere.width() - this.width() )/2+'px'
 });
}

$(document).ready( function() {
 $('.loader').centeringIn();
});