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

alignment, center, css, dialog, html

Solution

Try using this CSS

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

#dialog {
    position: relative;

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

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

<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

Problem

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

Original source