javascript - 如何动态居中 div css 高度和宽度

Question

我一直在尝试创建某种图像库，并且我希望 .lightboxCenter 类保留在页面的中心，但针对较小的屏幕减小尺寸。我该怎么做呢？另外，当我调整窗口大小时，div 覆盖了 ，我该如何阻止这种情况发生。非常感谢。 https://jsfiddle.net/36jkh1hj/

.lightboxBackground {
  width:            100%;
  height:           100%;
  top:              0;
  left:             0;
  background-color: #000;
  opacity:          0.7;
  position:         fixed;
}

.lightboxCenter {
  position:         fixed;
  height:           400px;
  width:            600px;
  top:              50%;
  left:             50%;
  margin-top:       -200px;
  margin-left:      -300px;
  border-radius:    10px;
  background-color: black;
}

.closeLightbox {
  float:           right;
  margin-right:    20px;
  color:           #d3d3d3;
  font-size:       60px;
  text-decoration: none;
  font-family:     sans-serif;
}

Answer 1

改变你的CSS像这样

.lightboxBackground {
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:.7;
position:fixed;
}

.lightboxCenter {
position:fixed;
height: calc(100% - 200px);
width: calc(100% - 200px);
top:100px;
left:100px;
margin-top:0;
margin-left:0px;
border-radius:10px;
background-color: black;
}

.closeLightbox {
float:right;
margin-right:20px;
color:#d3d3d3;
font-size:60px;
text-decoration:none;
font-family:sans-serif;
}

现场演示:https://jsfiddle.net/36jkh1hj/1/