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();

或某些等价物。

Answer 4

中心水平和顶点的其他方法div中的图像：

图像尺寸未知
未知的div大小
的响应

<强> DEMO

HTML：

<div> <img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" /> </div>

CSS：

div{ position:relative; } img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

Answer 5

使用：

display:inline-block;

或者：

display:block;

和

text-align:Center;

CSS文件内... 然后会出现

Answer 6

您可以使用属性对齐

来执行此操作

<div id="mydiv" align="center">
 <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>

Answer 7

Dave morgan的解决方案为我工作。

这是一个更清洁的版本。

上述所有解决方案的问题是您需要事先在容器中创建一些图像或div。这是浪费资源，难以应用于特定目标。让jquery生成div。

这是我的代码：

<强> JS

$('#trigger').on('click', function(){
   var target = $('#stage');
   var el = $('<div class="spinner" />').width(target.width()).height(target.height());
   target.prepend(el);
});

<强> CSS

.spinner{
    position: absolute;
    cursor: wait;
    z-index: 10000;
    -khtml-opacity:.50; 
    -moz-opacity:.50; 
    -ms-filter:"alpha(opacity=50)";
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50; 
    background: url('../img/system/ajax.gif') no-repeat center #f8f8f8;
}

如何在div的中心显示图像

7 个答案: