我如何获得聚光灯/阴影位置，以保持完全相同的相对水平中心位置，而不管变焦？

Question

在下面的小提琴，我成功地使聚光灯停留在同一个地方(水平中心)，除非我的变焦因子太大。换句话说，当我放大我的光斑时，不会停留在水平视图端口的中心。

请注意使用.spotlight-2:before填充视图上阴影的左边部分。这是我需要的，以防止非阴影区域的出现。

如何使聚光灯水平地保持在中心位置，而不是在浏览器中放大时向右移动？

Fiddle

https://jsfiddle.net/u0onf23y/

结果输出

https://jsfiddle.net/u0onf23y/embedded/result/

CSS

td .div{
  height: 400px;
}

.extend-full {
  padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px; }

    .spotlight-2{
        top: 0px;
        margin-left:-80px;
        float: left;
        display: block;
        background: radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -moz-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -webkit-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -o-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        margin-left: 0px;
        height: 100%;
        position: fixed;
        width: 100%;
        min-width: 100vw;
        min-height: 100vh;
        z-index: 10;
      };
      position: absolute;
      width: 100%;
      z-index: 10; }

    .account-settings-confirm-container-overlay {
      z-index: 10;
      background-color: white !important;
      height: 99px;
      position: absolute;
      margin-top: 10px;
      width: 250px;
      font-size: 12px;
      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); }
    .spotlight-2:before {
      content: "";
      position: absolute;
      display: block;   
      left: -100%;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.5);  
    }

Answer 1

试试挠曲箱。参见示例完整页http://codepen.io/rhroyston/full/qadGgd/

​

html, body {
  height: 100%;
  margin: 0;
}

#viewport{
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  
} 

.a{
  box-shadow: 0px 0px 5px grey inset;
    margin: auto;
    padding: 20px;
    background-color: #fefefe;
    border-radius: 50%;
}

<div id="viewport">
  <div class="box">
    <div class="a"></div>
  </div>
</div>

​