将流体图像在流体容器中垂直居中

Question

我当然不想添加到一堆垂直对齐 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 解决方案持开放态度。

Answer 1

这很好：

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

我猜显示表格单元格不适合你，因为它的父容器没有显示为表格。

这是 jsfiddle 中的演示：

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

Answer 2

也许这对你有用（div 是围绕你的图像的 div）：

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

运行示例。

Answer 3

让我们跳过所有餐桌上的废话吧！ :)

<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/