Question

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

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

<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

您可以像这样使用弹性框：

＆＃13;

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

＆＃13;

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

＆＃13;

Here a working JSFiddle example

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Here the JSFiddle for this alternative

很简单，上面的例子在FF中没有用，我在Chrome中看到过。

所以我这样解决了：

＆＃13;

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

＆＃13;

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

＆＃13;

And here the JSFiddle

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

1 个答案: