如何在div的中心显示图像

I have div with ajax-loader gif image

我有一个带有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); 
}

But could not get it displayed in the center (both vertically and horizontally). Need help with that.

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

7 个解决方案

#1

The following assumes that the width and height of the image is known:

以下假定图像的宽度和高度已知：

#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>

UPDATE: in modern browsers margin: auto will produce the desired result withing knowing the width/height of the image:

更新：在现代浏览器中：自动将在知道图像的宽度/高度时产生所需的结果：

#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>

#2

Full screen ajax loader, with some opacity.

全屏ajax加载器，具有一些不透明度。

using

运用

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

to toggle it.

切换它。

#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>

#3

Place this div just inside the area you are updating:

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

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

And add this to your css:

并将此添加到您的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;
}

When you want to display it, just call:

如果要显示它，只需调用：

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

or some equivalent.

或一些等价物。

#4

Other approach to center horizontaly and verticaly an image inside a div:

中心水平和垂直的其他方法div中的图像：

unknown image size
未知图像大小
unkown div size
未知的div大小
responsive
响应

DEMO

DEMO

HTML :

HTML：

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

CSS :

CSS：

div{
    position:relative;
}

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

#5

Use:

使用：

display:inline-block;

Or:

要么：

display:block;

And:

和：

text-align:Center;

Inside the CSS file... Then it will appear

在CSS文件中...然后它会出现

#6

You can do it with attribute align

你可以使用属性对齐来完成它

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

#7

Dave morgan's solution worked for me.

戴夫摩根的解决方案对我有用。

Here is a bit cleaner version of it.

这是一个更清洁的版本。

The problem with all the solutions above is that you need to create some image or div in your container before hand. That is a waste of resources and makes it hard to apply to specific targets. Let jquery generate the div instead.

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

Here is my code:

这是我的代码：

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

css

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;
}

#1