CSS将全屏图像与最大高度对齐到中间

Question

我正在尝试创建一个类似画廊的简单图像查看器，并且我想将图像与页面的中心和中间对齐。

这可以简单地使用table 和table-row 完成，但仅限于图像小于页面100% 的情况。在第二种情况下，我可以简单地通过text-align: centre 和max-height: 100% 对齐它。

这是我的代码：https://jsfiddle.net/rtv393z7/

<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
  <div style="width: 100%; height: 100%; text-align: center;">
    <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
  </div>
</div>

但是如何让它在这两种情况下都能正常工作呢？

Answer 1

你可以像这样使用弹性盒子：

.flex-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
  <div class="flex-content" style="width: 100%; height: 100%; text-align: center;">
    <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
  </div>
</div>

Here a working JSFiddle example

或者你可以像这样使用position: absolute和transform：

.center-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
    <div  class="center-content"  style="width: 100%; text-align: center;">
        <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
    </div>
</div>

还请注意，我从 .center-content 中删除了 height: 100% 内联样式。

Here the JSFiddle for this alternative

上面的例子在 FF 中不起作用，我在 Chrome 中看到过。

所以我这样修复它：

.center-content {
    position: relative;    
}

img{    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
    <div  class="center-content"  style="width: 100%; height: 100%;">
        <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
    </div>
</div>

And here the JSFiddle