Question

我在相对位置有一个div，在里面我用其他div显示图像，问题是这个div里面的图像改变了他的大小我可以放在绝对位置的中心但如果图像尺寸发生变化，最后改变他的位置

#image_container
{   
position:relative;
width:336px;
height:328px;
border:1px solid;
}


#image_load
{   
top:50px;
position:absolute;
width:auto;
height:auto;
left:50%;
margin-left:-50%;
} 

<div id="image_container">
    <div id="image_load">
        <img src="test.png">
    </div>
</div>

如果图像尺寸发生变化，我如何能够始终将位置固定在中心位置？

Answer 1

jsfiddle演示 最好的方法是不给宽度，即

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

并检查一下：Absolute Horizontal And Vertical Centering In CSS非常有用。

Answer 2

#image_load img {   
    width:95%;
    margin-left:auto;
    margin-right: auto;
}

Answer 3

试

#image_load img {   
    width:100%;
}

Answer 4

另一种方法是在父级和display上使用display：table：table-cell on child with vertical-align：middle。

#image_container
    {   
    position:relative;
    width:336px;
    height:328px;
    border:1px solid;
    display:table;
    }

    #image_load
    { 
        text-align:center;
        vertical-align:middle;
        display:table-cell;           
    }

CSS显示图像始终位于中心

4 个答案: