Javascript 屏幕中部和X2B的中心图像；覆盖层

当你点击一个图像时，它会显示在一个灯箱中。现在叠加的图像被放置在屏幕的顶部，但是最好的解决方法是将它放置在用户屏幕的中间。 代码如下

//创建一个灯箱
（功能（）{
var$lightbox=$（“”）；
变量$img=$（“
正文{
背景：线性渐变（右下角，#b81d1d，#5F554C，#E4DFD8）；
字体系列：“开放式Sans”，无衬线；
}
.文本{
显示：无；
}
.集装箱{
最大宽度：800px；
利润率：5%自动；
填充：20px；
背景色：#fff；
溢出：隐藏；
框大小：边框框；
盒影：0 15px 20px-15px rgba（0,0,0,0.3），0 35px 50px-25px rgba（0,0,0,0.3），0 85px 60px-25px rgba（0,0,0,0.1）；
}
.文本中心{
文本对齐：居中；
边缘底部：1米；
}
.灯箱画廊{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
.灯箱图库分区>img{
最大宽度：100%；
显示：块；
}
·灯箱廊分区{
利润率：10px；
弹性基准：180像素；
}
@仅介质屏幕和（最大宽度：480px）{
.灯箱画廊{
弯曲方向：立柱；
对齐项目：居中；
}
.lightbox>div{
边缘底部：10px；
}
}
/*Lighbox CSS*/
.灯箱{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,7）；
位置：固定；
排名：0；
左：0；
z指数：20；
填充顶部：30px；
框大小：边框框；
}
.灯箱img{
显示：块；
保证金：自动；
}
.灯箱.说明{
利润率：15px自动；
宽度：50%；
文本对齐：居中；
字号：1em；
线高：1.5；
字号：700；
颜色：#eee；
}

灯箱画廊
测试1
测试2
测试3
试验
试验
试验
这里有一个解决方案：



//创建一个灯箱
（功能（）{
var$lightbox=$（“”）；
变量$img=$（“
正文{
背景：线性渐变（右下角，#b81d1d，#5F554C，#E4DFD8）；
字体系列：“开放式Sans”，无衬线；
}
.文本{
显示：无；
}
.集装箱{
最大宽度：800px；
利润率：5%自动；
填充：20px；
背景色：#fff；
溢出：隐藏；
框大小：边框框；
盒影：0 15px 20px-15px rgba（0,0,0,0.3），0 35px 50px-25px rgba（0,0,0,0.3），0 85px 60px-25px rgba（0,0,0,0.1）；
}
.文本中心{
文本对齐：居中；
边缘底部：1米；
}
.灯箱画廊{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
.灯箱图库分区>img{
最大宽度：100%；
显示：块；
}
·灯箱廊分区{
利润率：10px；
弹性基准：180像素；
}
@仅介质屏幕和（最大宽度：480px）{
.灯箱画廊{
弯曲方向：立柱；
对齐项目：居中；
}
.lightbox>div{
边缘底部：10px；
}
}
/*Lighbox CSS*/
.灯箱{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,7）；
位置：固定；
排名：0；
左：0；
z指数：20；
填充顶部：30px；
框大小：边框框；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
.灯箱img{
显示：块；
}
.灯箱.说明{
利润率：15px自动；
宽度：50%；
文本对齐：居中；
字号：1em；
线高：1.5；
字号：700；
颜色：#eee；
}

灯箱画廊
测试1
测试2
测试3
试验
试验
试验
这里有一个解决方案：



//创建一个灯箱
（功能（）{
var$lightbox=$（“”）；
变量$img=$（“
正文{
背景：线性渐变（右下角，#b81d1d，#5F554C，#E4DFD8）；
字体系列：“开放式Sans”，无衬线；
}
.文本{
显示：无；
}
.集装箱{
最大宽度：800px；
利润率：5%自动；
填充：20px；
背景色：#fff；
溢出：隐藏；
框大小：边框框；
盒影：0 15px 20px-15px rgba（0,0,0,0.3），0 35px 50px-25px rgba（0,0,0,0.3），0 85px 60px-25px rgba（0,0,0,0.1）；
}
.文本中心{
文本对齐：居中；
边缘底部：1米；
}
.灯箱画廊{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
.灯箱图库分区>img{
最大宽度：100%；
显示：块；
}
·灯箱廊分区{
利润率：10px；
弹性基准：180像素；
}
@仅介质屏幕和（最大宽度：480px）{
.灯箱画廊{
弯曲方向：立柱；
对齐项目：居中；
}
.lightbox>div{
边缘底部：10px；
}
}
/*Lighbox CSS*/
.灯箱{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,7）；
位置：固定；
排名：0；
左：0；
z指数：20；
填充顶部：30px；
框大小：边框框；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
.灯箱img{
显示：块；
}
.灯箱.说明{
利润率：15px自动；
宽度：50%；
文本对齐：居中；
字号：1em；
线高：1.5；
字号：700；
颜色：#eee；
}

灯箱画廊
测试1
测试2
测试3
试验
试验
试验
将
填充底部：55px；
添加到
.lightbox
类，并将
高度：100%
添加到
类。lightbox img
此类。
希望这对你有用

下面是完整的工作示例


//创建一个灯箱
（功能（）{
var$lightbox=$（“”）；
变量$img=$（“
正文{
背景：线性渐变（右下角，#b81d1d，#5F554C，#E4DFD8）；
字体系列：“开放式Sans”，无衬线；
}
.文本{
显示：无；
}
.集装箱{
最大宽度：800px；
利润率：5%自动；
填充：20px；
背景色：#fff；
溢出：隐藏；
框大小：边框框；
盒影：0 15px 20px-15px rgba（0,0,0,0.3），0 35px 50px-25px rgba（0,0,0,0.3），0 85px 60px-25px rgba（0,0,0,0.1）；
}
.文本中心{
文本对齐：居中；
边缘底部：1米；
}
.灯箱画廊{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}
.lightbox-g