在流体容器中垂直居中流体图像答案

【问题标题】：Vertically center a fluid image in a fluid container在流体容器中垂直居中流体图像
【发布时间】：2011-06-22 01:35:50
【问题描述】：

我当然不想添加到一堆垂直对齐 CSS 问题中，但我花了几个小时试图找到一个无济于事的解决方案。情况如下：

我正在构建一个图片幻灯片库。我希望图像显示的大小与用户窗口允许的一样大。所以我有这个外部占位符：

<section class="photo full">

（是的，我使用的是 HTML5 元素）。其中有以下 CSS：

section.photo.full { 
    display:inline-block;
    width:100%; 
    height:100%; 
    position:absolute;
    overflow:hidden; 
    text-align:center;
}

接下来，将图像放入其中。根据图像的方向，我将宽度或高度设置为 75%，另一个轴设置为自动：

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>

所以，我们有一个流体外部容器，内部是流体图像。图像的水平居中工作，但我似乎无法找到将图像垂直居中于其容器内的方法。我研究过居中方法，但大多数都假设容器或图像具有已知的宽度或高度。然后是 display:table-cell 方法，它似乎对我也不起作用。

我被困住了。我正在寻找 CSS 解决方案，但也对 js 解决方案持开放态度。

【问题讨论】：

@Ferdy SECTION 元素是 BODY 的直接子元素吗？
@Ferdy 另外，发布一个用于 IMG 元素的 HTML 代码示例。
@Sime：是的。特此临时演示页面：ferdy.dnsalias.com/apps/jungledragon/html/tag/92/slideshow/…
@Ferdy 为什么设置min-height:75%？
@Sime。抱歉，我正在开发中。我现在把它去掉了。我还有这个问题，在 IE8 中，大图像只有 1 个像素高。

标签： css vertical-alignment fluid-layout

【解决方案1】：

让我们跳过所有的表格废话！ :)

<div>
    <img src="https://placehold.it/1000x1000">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

示例：https://jsfiddle.net/te29m9fv/1/

【讨论】：

【解决方案2】：

效果很好：

section.photo.full {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
}

section.photo.full a {
  outline: 0;
  display: table-cell;
  vertical-align: middle;
}

section.photo.full img {
  margin-top: 0;
}

我猜 display table-cell 对你不起作用，因为它的父容器没有显示为表格。

这是 jsfiddle 中的一个演示：

http://jsfiddle.net/duopixel/5wzPS/

【讨论】：

你这个人！这确实有效。 IE8 仍然存在其他问题，仅显示 1 个像素高的图像，但这是另一个挑战。
顺便说一句，我确实注意到修复后的两个副作用：1. a href 似乎跨越了整个窗口的宽度，而不是 75%。您可以通过将鼠标悬停在图像旁边看到这一点，光标将指示一个指针。 2.窗口拉大很多时，会出现垂直滚动条。似乎溢出：隐藏停止工作:(
如果您愿意应用额外的 div，您的问题可能会消失：section.photo.full > extradiv > a > img，然后将 table-cell 应用到 extradiv
@Duopixel。你摇滚，伙计。这很好用。我现在得到了一个相当强大的幻灯片！
如果你在任何情况下都不想要滚动条，那么你应该对 body 应用溢出：隐藏。这将解决您的问题。

【解决方案3】：

也许这对你有用（div 是包裹在你的图像周围的 div）：

div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Running example.

【讨论】：

OP说容器是流体的
确实，父容器也是流动的。