在固定位置Div垂直居中放置图像

Joe Majewski 发表于 Dev

乔·马耶夫斯基

关于SO的垂直对齐有很多问题，但是我还没有找到解决这个问题的明确答案。

我创建了一个小提琴以确切显示我要执行的操作。

HTML：

<div id="fade"></div>
<div id="fullscreen">
    <img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>

CSS：

#fade {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;

    /* Transparent Background */
    background-color: #000;
    opacity: 0.50;
}

#fullscreen {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#fullscreen img {
    /* Adding the display: block allowed me to center
       the image horizontally with the margin: auto. */
    display: block;
    margin: auto;

    /* Limit the size of the image. */
    max-width: 80%;
    max-height: 80%;

    /* This didn't work for me. */
    vertical-align: middle;

    /* This didn't do anything, either. */
    line-height: 100%;
}

我正在尝试制作各种灯箱，以便用户单击页面上的图像，从而使该图像以全屏模式加载。第一div，褪色，将用于与半透明的黑色背景，以覆盖整个页面，基本上给予渐行渐远的页面的效果，同时，也使事情模态。

我希望能够将图像嵌套在渐变中 div，但是遇到了一个问题。在外部div上设置不透明度（以创建淡入淡出效果）会导致我的嵌套图像继承不透明度值。因此，div除了没有背景，我添加了一个与第一个相同的单独图像，并将图像嵌套在其中。

作为记录，我确实设法解决了不透明性问题，但是我尚未实现它。感谢Blowski，谁张贴了这个答案，关于透明度问题一个SO用户：

我不想从CSS的父级继承子级不透明度

长话短说，我现在已经尝试了很多事情，试图使该图像垂直居中，但无济于事。

请记住，此解决方案需要使用任何图像！

我当然可以在$(window).resize()函数中添加一行代码来手动居中图像，但是如果可能的话，我想避免这样做。我很想学习解决此问题的方法，因为我似乎更经常遇到此类问题。

优点：为什么浏览器执行垂直对齐如此困难？

马克·奥德特

这是一种div使用CSS将图片固定在固定/绝对位置的方式。

#fullscreen {
    /* Cover the entire viewport. */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#fullscreen img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

    /* Limit the size of the image. */
    max-width: 80%;
    max-height: 80%;
}