这是一种同时水平和垂直对齐parent内的内联元素的技术：

垂直对齐

1）在这种方法中，我们创建一个inline-block（伪）元素作为 parent 的第一个（或最后一个）子元素，并将其height属性设置为获取其parent100%的所有高度。

2）此外，添加vertical-align: middle将内联（-block）元素保持在行空间的中间。因此，我们将 CSS 声明添加到first-child和我们的元素（图像）中。

3)最后，为了去除inline(-block)元素之间的空白字符，我们可以将父元素的字体大小设置为零font-size: 0;。

注意：我在下面使用了 Nicolas Gallagher 的图像替换技术。

有什么好处？

• 容器 ( parent ) 可以具有动态尺寸。
• 无需明确指定图像元素的尺寸。
• 我们也可以轻松地使用这种方法来垂直[对齐`元素](https://stackoverflow.com/questions/21533287/vertical-center-with-css/21534465#21534465)；它可能具有动态内容（高度和/或宽度）。但请注意，您必须重新设置 的font-size属性div`才能显示内部文本。在线演示。

<div class="container">
    <div id="element"> ... </div>
</div>
.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

输出

响应式容器

本节不会回答这个问题，因为 OP 已经知道如何创建响应式容器。但是，我将解释它是如何工作的。

为了使容器元素的高度随宽度padding变化（考虑纵横比），我们可以为顶部/底部属性使用百分比值。

顶部/底部填充或边距的百分比值相对于包含块的宽度。

例如：

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

这是在线演示。注释掉底部的行并调整面板大小以查看效果。

此外，我们可以将该padding属性应用于虚拟子元素或:before/:after伪元素以实现相同的结果。但请注意，在这种情况下，百分比值padding是相对于自身宽度的.responsive-container。

<div class="responsive-container">
  <div class="dummy"></div>
</div>
.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

演示 #1。
Demo #2 （使用:after伪元素）

添加内容

使用padding-top属性会在容器内的内容的顶部或底部产生巨大的空间。

为了解决这个问题，我们用包装元素包装内容，使用绝对定位从文档正常流程中删除该元素，最后扩展包装（使用top、right和属性）以填充其父级的整个空间，容器。_bottom``left

开始了：

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

这是在线演示。

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>
.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

这是工作演示。

显然，您可以避免使用::before伪元素来与浏览器兼容，并创建一个元素作为 的第一个子元素.img-container：

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

更新演示。

使用max-*属性

为了使框内的图像保持较低的宽度，您可以在图像上设置max-height和max-width属性：

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

这是更新的演示。