Javascript 将图像垂直居中于固定位置Div

关于垂直对齐有很多问题，但我还没有找到一个明确的答案

我创建了一个来精确显示我正在尝试做的事情

HTML:

我正在尝试制作一个各种各样的lightbox，这样用户就会点击页面上的一个图像，导致相同的图像以全屏模式加载。第一个

div

，淡入淡出，将使用半透明的黑色背景覆盖整个页面，基本上提供了页面淡出的效果，同时也使内容成为模态

我希望能够将图像嵌套在淡入淡出

div

中，但遇到了一个问题。在外部div上设置不透明度（以创建淡入效果）会导致嵌套图像继承不透明度值。因此，我添加了一个单独的

div

，它与第一个相同，只是没有背景，并将图像嵌套在其中

作为记录，我确实设法找到了解决不透明度问题的方法，但我还没有实现它。感谢Blowski，一位SO用户发布了关于不透明度问题的答案：

长话短说，我已经尝试了很多事情，现在试图让这个形象是垂直居中，但没有任何效果

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

我当然能够向

$（window）.resize（）

函数添加一行代码以手动将图像居中，但如果可能，我希望避免这样做。我很想了解一种解决这一问题的方法，因为我似乎更经常地遇到我喜欢的这类问题

---

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

这里有一种方法，使用CSS将图像居中于固定/绝对位置的

div

#全屏{
/*覆盖整个视口*/
位置：固定；
顶部：0px；
右：0px；
底部：0px；
左：0px；
}
#全屏img{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
/*限制图像的大小*/
最大宽度：80%；
最高高度：80%；
}

诀窍是对

img

使用

position:absolute

，并将所有偏移设置为0，然后

margin:auto

将图像居中

max width

和

max height

值将按预期工作

这样做的原因是图像具有内在的维度，因此CSS引擎具有特定的值来进行必要的数学运算，使图像在垂直和水平方向居中

请参见演示：

评论

请注意，此技术独立于覆盖层工作

此外，无论图像的纵横比如何，这都有效

参考

该技术源自CSS2规范，该规范涉及如何为绝对定位的内联替换元素确定水平和垂直边距

及

---

这里有一种方法，使用CSS将图像居中于固定/绝对位置的

div

#全屏{
/*覆盖整个视口*/
位置：固定；
顶部：0px；
右：0px；
底部：0px；
左：0px；
}
#全屏img{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
/*限制图像的大小*/
最大宽度：80%；
最高高度：80%；
}

诀窍是对

img

使用

position:absolute

，并将所有偏移设置为0，然后

margin:auto

将图像居中

max width

和

max height

值将按预期工作

这样做的原因是图像具有内在的维度，因此CSS引擎具有特定的值来进行必要的数学运算，使图像在垂直和水平方向居中

请参见演示：

评论

请注意，此技术独立于覆盖层工作

此外，无论图像的纵横比如何，这都有效

参考

该技术源自CSS2规范，该规范涉及如何为绝对定位的内联替换元素确定水平和垂直边距

及

---

非常感谢！这正是我一直在寻找的！作为一名web开发人员，我觉得自己对许多CSS规则及其工作方式一无所知。我试图通过更清楚地理解一些我一直在使用的属性来提高自己，而不知道它们如何工作的真实信息。我感谢你的帮助！非常感谢你！这正是我一直在寻找的！作为一名web开发人员，我觉得自己对许多CSS规则及其工作方式一无所知。我试图通过更清楚地理解一些我一直在使用的属性来提高自己，而不知道它们如何工作的真实信息。我感谢你的帮助！

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

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