如何在div的中心显示图像

我有一个带有ajax加载gif图像的div

<div id=“mydiv”style=“高度:400px;文本对齐:居中;”>
<img src=”https://stackoverflow.com/Content/ajax-loader.gif“class=“ajax加载程序”/>
&lt/部门>
.ajax加载程序
{
/*对IE 5-6隐藏*/
页边空白顶部:0;/*清理,以防IE稍后支持valign*/
垂直对齐:中间对齐;
页边顶部:表达式((150-this.height)/2);
}

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

以下假设图像的宽度和高度已知:

\mydiv{
高度:400px;
位置:相对位置;
背景色:灰色;/*用于演示*/
}
.ajax加载程序{
位置:绝对位置;
左:50%;
最高:50%;
左边距:-32px;/*-1*图像宽度/2*/
页边距顶部:-32px;/*-1*图像高度/2*/
}
<div id=“mydiv”>
<img src=”http://dummyimage.com/64x64/000/fff.gif&text=加载“class=“ajax加载程序”>
&lt/部门&gt

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

\mydiv{
高度:400px;
位置:相对位置;
背景色:灰色;/*用于演示*/
}
.ajax加载程序{
位置:绝对位置;
左:0;
排名:0;
右:0;
底部:0;
保证金:自动;/*普雷斯托*/
}
<div id=“mydiv”>
<img src=”http://dummyimage.com/64x64/000/fff.gif&text=加载“class=“ajax加载程序”>
&lt/部门&gt

发表评论