如何在div的中心显示图像

Question

我有一个带有ajax-loader gif图片的div

<div id="mydiv" style="height: 400px; text-align: center;">
    <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>

.ajax-loader
{
    /*hidden from IE 5-6 */
    margin-top: 0; /* to clean up, just in case IE later supports valign! */
    vertical-align: middle;
    margin-top: expression(( 150 - this.height ) / 2); 
}

但无法将其显示在中心(垂直和水平)。我需要帮助。

Answer 1

下面假设图像的宽度和高度是已知的：

​

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px; /* -1 * image width / 2 */
  margin-top: -32px; /* -1 * image height / 2 */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

​

更新：在现代浏览器中，margin: auto将在知道图像的宽/高的情况下产生所需的结果：

​

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* presto! */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

​

Answer 2

全屏ajax加载器，带有一些不透明性。

使用

$('#mydiv').show(); 
$('#mydiv').hide(); 

来切换它。

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

Answer 3

将此div放在要更新的区域内：

<div id="myLoader" class="ajax-loader"></div>

并将此代码添加到css中：

.ajax-loader {
    cursor: wait;
    background:#ffffff url('ajax-loader.gif') no-repeat center center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
    position: absolute;
    z-index: 10000;
    display: none;
}

当您想要显示它时，只需调用：

$('#myLoader').css({
    height: $('#myLoader').parent().height(), 
    width: $('#myLoader').parent().width()
});
$('#myLoader').show();

或者其他类似的东西。