这是一种在水平方向和垂直方向上同时对齐父元素内的内联元素的技术：
垂直对齐
1）在这种方法中，我们创建inline-block（伪）元素作为父对象的第一个（或最后一个）子代，并将其height属性设置100%为采用其父对象的所有高度。
2）此外，添加vertical-align: middle会将inline（-block）元素保留在行空间的中间。因此，我们将该CSS声明添加到第一个孩子和我们的元素（image）中。
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属性使用百分比值。
顶部/底部填充或边距上的百分比值是相对于包含块的宽度。
例如：
.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伪元素以实现相同的结果。但请注意，在这种情况下，百分比值on 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。
演示2 （使用:after伪元素）
添加内容
使用padding-top属性会在容器内部的内容顶部或底部产生巨大的空间。
为了解决这个问题，就需要通过一个包装元件包的内容，通过利用来自原稿正常流中删除该元素绝对定位，最后展开的包装（BU使用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-heightmax-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 */
}
这是UPDATED DEMO。