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

关键词：

【中文标题】在响应式方形 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看看结果。

【讨论】：

如何在响应式页面上的 div 内垂直和水平居中两个图像

】如何在响应式页面上的div内垂直和水平居中两个图像【英文标题】：Howtoverticallyandhorizontallycentertwoimagesinsideadivonaresponsivepage【发布时间】：2017-01-2204:50:49【问题描述】：我正在使用Skeleton和Normalizecss。我想在div容器内垂直和水... 查看详情

在响应式正方形中垂直对齐文本块

】在响应式正方形中垂直对齐文本块【英文标题】：VerticallyAlignTextBlockinResponsiveSquare【发布时间】：2014-04-1522:07:53【问题描述】：我想知道是否有人可以帮助我解决这个问题。基本上，我试图将位于正方形内的文本块垂直居中。... 查看详情

如何垂直居中响应式剪切图像？

】如何垂直居中响应式剪切图像？【英文标题】：Howtoverticallycenteraresponsiveclippedimage?【发布时间】：2017-05-3019:25:55【问题描述】：我正在尝试将被剪裁的图像垂直居中。图像是响应式的。在移动设备上，图像是全尺寸的，看起来... 查看详情

Bootstrap 3和div中垂直居中的响应图像[重复]

】Bootstrap3和div中垂直居中的响应图像[重复]【英文标题】：Bootstrap3andverticallycenteringresponsiveimageindiv[duplicate]【发布时间】：2017-12-2522:02:05【问题描述】：如何使图像在Div/Row中垂直居中。我已经搜索过了，但所有的解决方案似乎... 查看详情

在方形（flex）div中垂直居中文本[重复]

】在方形（flex）div中垂直居中文本[重复]【英文标题】：Verticallycenteringtextinsquare(flex)divs[duplicate]【发布时间】：2018-05-2013:17:13【问题描述】：我正在构建一个包含一些特定约束的单元格网格的游戏，但我无法让CSS正确地完成所... 查看详情

响应式文本在图像上居中对齐

】响应式文本在图像上居中对齐【英文标题】：ResponsiveTextAlignedCenteronImage【发布时间】：2016-12-1313:58:39【问题描述】：我为我的博客文章创建了这个布局，每篇文章都会自动发布到那里。我对我的设置非常满意，但我一辈子都... 查看详情

响应式设计：如何调整图像/背景图像的大小并垂直对齐 div？

】响应式设计：如何调整图像/背景图像的大小并垂直对齐div？【英文标题】：Responsivedesign:Howtoresizeimages/backgroundimagesandaligndivsvertically?【发布时间】：2013-04-1423:15:56【问题描述】：我正在尝试响应式设计。我的图像目前没有调整... 查看详情

如何在方形div中垂直和水平居中单个字符(代码片段)

我想在一个正方形div中居中一个任意角色。我承认这听起来像一个非常简单的任务，但我尝试过的任何东西都没有用（而且我尝试了很多东西！）1。为了具体，让我们说div的高度和宽度等于20ex，让我们说单个字符就是所谓的“... 查看详情

如何在响应式方形网格中仅使背景图像透明？

】如何在响应式方形网格中仅使背景图像透明？【英文标题】：Howtomakeonlybackgroundimagetransparentinresponsivesquaregrid?【发布时间】：2015-01-2104:34:25【问题描述】：使用web-tiki\'sresponsivesquaregridlay-out\'s，我制作了一些带有背景图像和文... 查看详情

垂直居中响应图像

】垂直居中响应图像【英文标题】：VerticallyCenterResponsiveImage【发布时间】：2013-03-0419:21:21【问题描述】：我想知道是否有一种简单的方法可以将响应式图像垂直居中。请参考以下jsFiddle：http://jsfiddle.net/persianturtle/yawTb/1/基本HTML... 查看详情

如何在 div 中垂直居中 H1？

...在我的一生中，我无法让它们中的任何一个起作用。对于响应式网站，我尝试将h1居中放在div中。水平居中不是问题，但我无法将其垂直居中。大概我做错了什么或误解了我在这里找到的解释（或两者兼而有之）。因此，由于 查看详情

如何在div中垂直居中图像

】如何在div中垂直居中图像【英文标题】：Howtocenterimageverticallyindiv【发布时间】：2018-02-2618:59:45【问题描述】：我有一个高度为100vh的div，因此它始终是浏览器屏幕的高度。在这个div中，我想放置一个图像并将其垂直于其父级居... 查看详情

仅使用css在div中垂直居中图像[重复]

】仅使用css在div中垂直居中图像[重复]【英文标题】：Centerimageverticallyindivusingonlycss[duplicate]【发布时间】：2018-03-2813:49:38【问题描述】：我正在尝试将包含在显示设置为表格的div中的图像居中。在其中，我希望显示一个图像，它... 查看详情

bootstrapdiv垂直居中+水平居中保持响应式

引入bootstrap4css文件，只在bootstrap4有效，bs3效果不太行：垂直居中：为需要垂直居中的div新建如下样式.col-center-block{position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY( 查看详情

在具有动态高度的div中垂直居中图像[重复]

】在具有动态高度的div中垂直居中图像[重复]【英文标题】：Centeringanimageverticallyinadivwithadynamicheight[duplicate]【发布时间】：2015-06-0103:06:16【问题描述】：我有一个div，它是屏幕的vh的1/5。我希望该div中的图像垂直居中。我能够将... 查看详情

CSS - 在浮动 div 中垂直居中图像

】CSS-在浮动div中垂直居中图像【英文标题】：CSS-verticallycenteranimagewithinafloateddiv【发布时间】：2011-04-0823:49:56【问题描述】：我决定在这个问题上认输，需要一些帮助:)。根据标题，尝试垂直对齐包裹在浮动固定高度div中心的锚... 查看详情

如何在具有（流体高度）的响应框中垂直居中文本[重复]

】如何在具有（流体高度）的响应框中垂直居中文本[重复]【英文标题】：HowdoIverticallycenteringtextinsidearesponsiveboxthathasa(fluidheight)[duplicate]【发布时间】：2013-09-1603:24:22【问题描述】：我正在构建一个响应式网站并使用网格系统。... 查看详情

响应式布局中ul的垂直对齐

】响应式布局中ul的垂直对齐【英文标题】：Verticalalignmentofulinresponsivelayout【发布时间】：2014-02-0804:34:32【问题描述】：我整天都在努力使ul列表和id="menu"在这个响应式布局中垂直居中。非常感谢能在正确的地方提供帮助... 查看详情