vertically and horizontally centered transparent div with all surrounding area solid white

How can I center a transparent <div> element and have the surrounding area be white?

How my page looks now:

How I want it to look:

(Orange out开发者_如何转开发line is for illustrative purposes only and would not exist on page.)

---

What's your goal for this? IE - What's your reasoning for needing essentially a "mask" over your site? Also, are there any other constraints you need, such as needing to be able to have text or other things in the white area, or needing to change in size or shape? The more information you can provide, the better.

Without context, my main idea is make the div the size of the transparent area and make a white border the size you need. You can center the div by using margin: auto; for horizontal centering, and either top/bottom margins, or set line-height to the height of (might require setting display: inline-block), depending on your design and needs.

This, of course, assumes you're not going to actually use the white area (such as with a view finder or other masking tool).

---

I do give most of the credit to @Shauna for this answer. Anyways here it is:

---

All that is needed is a huge white border around the transparent <div> element. Then we can use fixed positioning and negative left and top margins to center the transparent <div> in the middle of the browser window:

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