垂直和水平居中的透明div，所有周围区域为纯白色

Question

如何将透明的<div>元素居中并使周围区域为白色？
我的页面现在看起来如何：

我多么希望看到：

（橙色大纲仅用于说明目的，不会出现在页面上。）

Answer 1

你的目标是什么？ IE - 你的网站需要一个“面具”的理由是什么？此外，您是否还需要其他约束，例如需要能够在白色区域中包含文本或其他内容，还是需要更改大小或形状？您可以提供的信息越多越好。

如果没有上下文，我的主要想法是将div设为透明区域的大小，并使白色边框达到您需要的大小。您可以使用div将margin: auto;置于水平居中，以及上/下边距，或将行高设置为高度（可能需要设置display: inline-block），具体取决于您的{{1}}设计和需求。

当然，这假设您不会实际使用白色区域（例如使用取景器或其他遮罩工具）。

Answer 2

对于这个答案，我确实将大部分功劳归功于@Shauna。无论如何它是：

---

所需要的只是透明<div>元素周围的巨大白色边框。然后我们可以使用固定定位和负左边距和上边距将透明<div>置于浏览器窗口中间：

div#trans{
    width:200px;
    height:200px;
    border:900px solid #fff;
    margin:-1000px 0 0 -1000px; /* 1000px is half of overall height (includeing huge border) of div#trans */
    position:fixed;
    top:50%;
    left:50%;
}