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

Posted 2023-03-05

【中文标题】在响应式方形 div 中垂直居中图像

【英文标题】：vertically center image within responsive square 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

你可以看看这个答案，带有内容的响应方块：***.com/a/20457076/1811992 它描述了一种在响应方块中居中内容的好技术。

【参考方案1】：

这样的？

HTML：

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

CSS：

bodymargin:0px auto;padding:0;text-align:center;
divpadding:80px;width:25%;margin:0px auto;background:green;
imgwidth: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看看结果。