一个简单的解决方案是使用Flexbox。将容器的CSS定义为：

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

将包含的图像宽度调整为100%，您将在容器中获得一个保持尺寸的居中图像。

查看我的解决方案：http://codepen.io/petethepig/pen/dvFsA

它是用纯CSS编写的，没有任何JavaScript代码。它可以处理任何大小和方向的图像。

给定这样的HTML：

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS代码将是：

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

编辑：以前基于表格的图像定位在Internet Explorer 11中存在问题（最大高度在显示中不起作用：表格元素）。我将其替换为基于内联的定位，这不仅在InternetExplorer7和InternetExplorer11中都很好，而且还需要更少的代码。

这是我对这个问题的看法。只有当容器具有指定的大小（最大宽度和最大高度似乎不适合没有具体大小的容器）时，它才会起作用，但我以允许重用的方式编写了CSS内容（在现有容器中添加相框类和px125大小类）。

在CSS中：

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

在HTML中：

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

演示

/*主样式*/.相框{垂直对齐：顶部；显示：内联块；文本对齐：居中；}.picture-frame.px32{宽度：32px；高度：32px；线条高度：32px；}.picture-frame.px125{宽度：125px；高度：125px；线条高度：125px；}.相框img{页边空白：-4px；/*使用垂直对齐定位时，由于某些原因，内联图像有轻微偏移*/最大宽度：100%；最大高度：100%；显示：内联块；垂直对齐：中间；边框：0；/*在Internet Explorer中删除锚定中包含的图像的边框*/}/*额外费用*/.相框{填充：5px；}框架{边框：1px实心黑色；}<p>32像素</p><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a><p>125像素</p><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a>

编辑：使用JavaScript可能进一步改进（放大图像）：

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

我有更好的解决方案，不需要任何JavaScript。它反应灵敏，我经常使用它。通常需要将任何纵横比的图像与具有指定纵横比的容器元素相匹配。必须让这一切都能完全响应。

/*仅用于此演示*/.容器{最大宽度：300px；边距：0自动；}.img框架{方框阴影：3px 3px 6px rgba（0，0，0、.15）；背景：#ee0；边距：20px自动；}/*这适用于具有指定纵横比的响应容器*/.纵横比{位置：相对；}.方面-1-1{填充底部：100%；}.方面-4-3{填料底部：75%；}方面-16-9{垫底：56.25%；}/*这是关键部分-定位并将图像适配到容器*/.fit img{位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；最大宽度：80%；最大高度：90%}.fit img底部{顶部：自动；}.紧密贴合{最大宽度：100%；最大高度：100%}<div class=“container”><div class=“纵横比aspect-ratio-1-1 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-4-3 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img fit img tight“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/400x400“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/300x400“class=”fit img fit img bottom“alt=”sample“></div></div>

您可以独立设置最大宽度和最大高度；图像将遵循最小的图像（取决于图像的值和纵横比）。您还可以将图像设置为按需对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到中心底部）。

这里有一个解决方案，即使提供的图像太小或太大，无法容纳div，它也可以在div中垂直和水平对齐img，而不进行任何拉伸。

HTML内容：

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS内容：

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery部分：

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

我以这种方式在超链接内水平和垂直居中并按比例缩放图像：

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

它在Internet Explorer、Firefox和Safari中进行了测试。

有关居中的更多信息，请参阅此处。