css - 如何在 <div> 中水平和垂直居中 <img>？

我不想使 div 居中，我希望 div 的内容居中。我想要水平和垂直对齐。

对不起，如果这太容易了或其他什么，但这有点麻烦。

格雷

我正在使用 IE7

最佳答案

如果您知道图像的高度和宽度，请将其绝对定位，将 top/left 设置为 50%，将 margin-top/left 设置为图像高度/宽度的负一半。

#foo {
    position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
    width:240px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-100px;
}

现场示例:http://jsfiddle.net/Zd2pz/

关于css - 如何在 <div> 中水平和垂直居中 <img>？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4494130/