вертикально и горизонтально центрированный прозрачный div со всей окружающей областью, белым

Question

Как я могу отцентрировать прозрачный элемент <div> и сделать окружающую область белой?
Как выглядит моя страница сейчас:

Как я хочу, чтобы это выглядело:

(Оранжевый контур предназначен только для иллюстративных целей и не существует на странице.)

Answer 1

Какова ваша цель для этого?IE - Что вы думаете о необходимости по существу "маски" над вашим сайтом?Кроме того, есть ли какие-то другие ограничения, которые вам нужны, такие как необходимость иметь возможность разместить текст или другие вещи в белой области, или необходимость изменения размера или формы?Чем больше информации вы сможете предоставить, тем лучше.

Без контекста моя основная идея - сделать размер прозрачной области div и сделать белую рамку нужного вам размера.Вы можете отцентрировать div, используя margin: auto; для горизонтального центрирования и либо верхнее / нижнее поля, либо установить высоту строки на высоту (может потребоваться установка display: inline-block), в зависимости от вашего дизайна и потребностей.

Это, конечно, предполагает, что вы фактически не собираетесь использовать белую область (например, с видоискателем или другим маскирующим инструментом).

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%;
}