这是一种同时水平和垂直对齐parent内的内联元素的技术：
垂直对齐
1）在这种方法中，我们创建一个inline-block（伪）元素作为 parent 的第一个（或最后一个）子元素，并将其height属性设置为获取其parent100%的所有高度。
2）此外，添加vertical-align: middle将内联（-block）元素保持在行空间的中间。因此，我们将 CSS 声明添加到first-child和我们的元素（图像）中。
3)最后，为了去除inline(-block)元素之间的空白字符，我们可以将父元素的字体大小设置为零font-size: 0;。
注意：我在下面使用了 Nicolas Gallagher 的图像替换技术。
有什么好处？
<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变化（考虑纵横比），我们可以为 top/bottom属性使用百分比值。
顶部/底部填充或边距的百分比值相对于包含块的宽度。
例如：
.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和属性）以填充其父级的整个空间，容器。_bottomleft
开始了：
.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 */
}
这是更新的演示。