响应方形div内的垂直居中图像

Question

我试图将div内的图像居中，该div可以进行响应缩放，并且始终为正方形。

JSFiddle

多亏了这里的CSS-only选项，我的工作始终处于正常状态。

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;}

但是最后，我似乎无法同时使用它们……有人能指出我的问题吗？！

Answer 1

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

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

使图像垂直居中。本文介绍了我使用的方法（绝对定位和拉伸）。

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

您可以看看这个小提琴以查看结果。