在响应式方形 div 中垂直居中图像答案

【问题标题】：vertically center image within responsive square div在响应式方形 div 中垂直居中图像
【发布时间】：2014-07-08 06:38:00
【问题描述】：

我正在尝试将图像居中在一个 div 内，该 div 可以响应地缩放并且始终是方形的。

JSFiddle

感谢很棒的CSS-only option here，我的 always-square 部分正常工作。

CSS：

.thumbnail_container {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}

HTML：

<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail vcenter-int">
      <img src="http://placehold.it/200x300" />
  </div>
</div>

div 中的 v-align 通常非常简单：

.vcenter-ext { display: table;}
.center-int { display: table-cell; vertical-align: middle;}

但最后，我似乎无法将它们一起使用...谁能指出我的问题？！？

【问题讨论】：

如果你不关心=<IE9，那么你可以使用flexbox：css-tricks.com/snippets/css/a-guide-to-flexbox
你可以看看这个答案，带有内容的响应方块：stackoverflow.com/a/20457076/1811992 它描述了一种在响应方块中居中内容的好技术。

标签： html css responsive-design vertical-alignment

【解决方案1】：

这样的？

HTML：

<div>
<img src="http://placehold.it/200x300" />

CSS：

body{margin:0px auto;padding:0;text-align:center;}
div{padding:80px;width:25%;margin:0px auto;background:green;}
img{width:80%;margin:0px auto;padding:0;}

http://jsfiddle.net/8Fjsd/

还有：

vcenter-int 不存在

【讨论】：

【解决方案2】：

要解决您的问题，您必须删除 display: table; 和 display: table-cell; vertical-align: middle; 并添加以下内容：

.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

将图像垂直居中。 This article 解释了我使用的方法（绝对定位和拉伸）。

注意：我的代码可以正常工作，因为.thumbnail，img 标签的父级，有一个position: absolute 属性。

你可以去this fiddle看看结果。

【讨论】：