2) 另外，添加 vertical-align: middle会使行内(- block)元素保持在行空间的中间。因此，我们将 CSS 声明添加到 第一个孩子和 我们的元素(形象)。

3) 最后，为了消除 内联(- 块)元素之间的空白字符，我们可以通过 font-size: 0;将 家长的字体大小设置为零。

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

有什么好处？

• 容器(家长)可以具有动态维度。

• 不需要显式地指定 image 元素的尺寸。

• 我们也可以很容易地将这种方法用于 使 <div>元件垂直对齐; 它可能具有动态内容(高度和/或宽度)。但是请注意，您必须重新设置 div的 font-size属性以显示内部文本。在线演示.

<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 已经知道如何创建响应性容器。不过，我会解释它是如何工作的。

为了使容器元素的 身高随着它的 宽度(关于高宽比)发生变化，我们可以为 top/bottom 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 。
演示 # 2 < em > (使用 :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;
}

这是 网站: http://jsfiddle.net/hashem/46psK/”rel = “ noReferrer”> 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%;
}

更新的 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 */
}

这是 更新后的 DEMO 。