css - 在固定大小的 div 中垂直对齐居中图像

Question

我有一个 145px X 145px 的 div。我在这次潜水中有一个 img。 img 可以是任何大小(最长边为 130px)。我希望图像在 div 中垂直居中。我尝试过的所有内容都适用于大多数浏览器，但不适用于 IE7。我需要可以在 IE7 中运行的东西。

Answer 1

这是一个跨浏览器的解决方案:

<div class="img-container"><img src="picture.png" class="cropped"/></div>


div.img-container {
     width: 390px;
     height: 211px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
 }
img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}