Question

I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without 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

With percentages, you can set your box such that half of it is on the left side. So

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

You could also use px but then you’ll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.