How to design a CSS for a centered floating confirm dialog?

Question

Hi there,

I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page.

Tried that, but it's not 'always centered' at all, since the position is fixed:

.Popup
{
    text-align:center;
    position: absolute;
    bottom: 10%;
    left: 27%;
    z-index:50;
    width: 400px;
    background-color: #FFF6BD;
    border:2px solid black;
}

Any idea? Thanks

Answer 1

Realise this doesn't answer the question - but have you looked at Jquery UI's dialogs? Might be useful to you.

http://jqueryui.com/demos/dialog/

Answer 2

.Popup { width:400px; margin-left:auto; margin-right:auto; }

that's horizontal alignment, vertical alignment is a little trickier. just google around for 'css vertical center' or something

Answer 3

Try using this CSS

#centerpoint {
    top: 50%;
    left: 50%;
    position: absolute;
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}

Against this HTML markup

<div id="centerpoint">
    <div id="dialog"></div>
</div>

#centerpoint should be the container div of the dialog

Note that the #centerpoint DIV should be inside the body element or inside elements that don't have a position: relative; property

Answer 4

Christian's solution works great, unless the page has vertical scrolling, in which case centering is relative to the actual height rather than the visible area. Anyone know how to solve this?