在页面中央显示图像

时间:2009-08-03 20:19:53

标签: css

我有一张图片 - 加载图片。

我希望该图像显示在页面的中央。 我怎么能这样做?

我写的代码是:

img.loading
    {
        position:absolute;
        left:0px;
        top:0px;
        z-index:1;
    }

如何让这张图片始终显示在页面中央?

3 个答案:

答案 0 :(得分:22)

找到这个:How to Center an Image Perfectly in CSS,可能有帮助。

#img
{
    position:absolute;
    width:592px; /*image width */
    height:512px; /*image height */
    left:50%; 
    top:50%;
    margin-left:-296px; /*image width/2 */
    margin-top:-256px; /*image height/2 */
}

答案 1 :(得分:6)

请参阅W3C

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

答案 2 :(得分:4)

或者您可以使用background: url(center_image) no-repeat center;


工作示例: http://jsfiddle.net/DT4hL/