这是一种在父中同时水平和垂直对齐内联元素的技术：
垂直对齐
1) 在这种方法中，我们创建一个inline-block（伪）元素作为父的第一个（或最后一个）子元素，并设置其@ 987654338@ 属性到100% 以获取其父级的所有高度。
2) 此外，添加vertical-align: middle 可将内联(-block) 元素保持在行间距的中间。因此，我们将 CSS 声明添加到 first-child 和 our element（image）两者中。
3) 最后，为了去除inline(-block)元素之间的空白字符，我们可以设置parent 由font-size: 0; 归零。
注意：我在下面使用了 Nicolas Gallagher 的image replacement technique。
有什么好处？
<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 已经知道如何创建响应式容器。不过，我会解释它是如何工作的。
为了使容器元素的 height 随其 width 变化（考虑纵横比），我们可以为 top/bottom @987654347 使用百分比值@属性。
顶部/底部填充或边距上的 percentage value 与包含块的宽度相关。
例如：
.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 */
}
这里是 Online Demo。注释掉底部的行并调整面板大小以查看效果。
此外，我们可以将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 */
}
Demo #1。
Demo #2 （使用:after伪元素）
添加内容
在容器内的内容顶部或底部使用padding-top 属性causes a huge space。
为了解决这个问题，我们用一个包装器元素包装了内容，使用absolute positioning从文档正常流程中删除该元素，最后展开包装器（使用top、right、@987654360 @ 和 left 属性）来填充其父容器容器的整个空间。
我们开始吧：
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
这里是Online Demo。
齐心协力
<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;
}
这里是WORKING DEMO。
显然，为了浏览器兼容性，您可以避免使用::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%;
}
UPDATED DEMO。
使用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 */
}
这里是UPDATED DEMO。