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

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/