Question

<style>
.black_overlay{
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 562px;
    height: 380px;
    background-color: white;
    z-index:1002;
    overflow: hidden;
    }
</style>

当点击链接时，我试图在当前可见屏幕的中间弹出div“white_content”。即使div将保留滚动，我希望它出现在中心可见屏幕上。黑色叠加层只会使背景变灰。

Answer 1

要让弹出窗口居中，请将其从顶部和左侧放置50％，然后使用边距减去弹出窗口大小的一半

.white_content {
    display  : none;
    position : fixed;
    top      : 50%;
    left     : 50%;
    width    : 562px;
    height   : 380px;
    margin   : -190px 0 0 -281px;
    z-index  : 1002;
    overflow : hidden;
    background-color: white;
}

FIDDLE

Answer 2

要将白框完美地放在中间位置，您需要将top和left设置为50％，然后使用margin减去宽度和高度的一半，在这种情况下margin: -190px 0 0 -281px; 1}}

Answer 3

Adendeo的上述答案适合您的情况，因为您知道弹出窗口的尺寸。如果您的浏览器支持要求允许，另一种技术是使用translate而不是硬编码像素值：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

这是有效的，因为translate根据元素的大小计算其长度值，而不是其容器。

Answer 4

试试这个

.white_content {
    visibility: hidden; 
    position:fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
}

弹出div保持在可见屏幕的中心

4 个答案: