Javascript jquery灯箱中心

我有一个关于灯箱中心位置的问题

在此

您可以单击右上角的按钮，然后看到灯箱

我可以将其设置为灯箱位置的CSS：

.elight{
   position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      background:#fff;
      opacity: .0;
      filter:alpha(opacity=0);
      z-index:300;
      display:none;
}
.eall_in_one{
  position:absolute;
      top:10%;
      left:28%;
      width:600px;
      height:auto;
      padding-bottom:20px;
      background:#fff;
      z-index:500;
      padding:0; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      box-shadow:         0px 0px 25px 0px rgba(50, 50, 50, 0.53);
  display:none;
}

但这是没有用的

问题是位置。例如，如果在单击此按钮时单击下面的按钮，则页面将自动向上移动

我希望我能表达我自己。

试试这个

.eall_in_one{
      position:absolute;
      top:10%;
      left:50%;
      width:600px;
      height:auto;
      padding-bottom:20px;
      background:#fff;
      z-index:500;
      margin-left: -300px;
      padding:0; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      box-shadow:         0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      display:none;
}

---

谢谢你的回复。但是我试过这个，它是一样的。如果点击按钮低于900px，会发生什么？。