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

Running example.

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/

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

3 个答案: