Question

我有以下HTML和CSS，现在我想将弹出窗口放在任何浏览器窗口大小的屏幕中间。没有JavaScript，这可能吗？

CSS：

.floating-window {
    z-index: 9999;
    position: absolute;
    width: 200px;
height: 200px;  
    cursor: default;
    -moz-box-shadow: 1px 1px 1px #888;
    -webkit-box-shadow: 1px 1px 1px #888;
    box-shadow: 1px 1px 1px #888;
}

HTML：

<div class='floating-window box'></div>

Answer 1

使用百分比，您可以设置框，使其一半位于左侧。所以

width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */

您也可以使用px但是您将被限制为绝对容器宽度。你有没找过？我知道有一些文章比我更广泛地解释这种方法。

Answer 2

当然，这是可能的，但是你怎么能让它消失呢？

这需要JavaScript ......

在没有JavaScript的情况下将弹出窗口定位在屏幕中间

2 个答案: