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


Tags: html,css,dialog,alignment,center

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



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


    CSS Howto..

    outlook.com how to target css at a specific class

    How to create dropdown navigationbar without float?

    How to make a “” looks like a link with CSS?

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    How to create a header which fills the background with a color throughout the width

    gwt - How to CSS reset a GWT app?

    How to make slanted ribbon

    How to make equal space between boxes in one row via CSS

    How to apply an image to a CSS ordered list in WordPress?

    Unicode down triangle doesn't show up in IE9

    Navigation bar - How to keep the page highlighted when selected?

    How to reference CSS children [duplicate]

    CSS HTML how to remove whole cell links in tables?

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    How to arrange input elements to columns or other way to improve form readability

    How can I divide the screen to these divs in css?

    How to layout list items in groups

    How do I filter unwanted CS styles from CS sheet?

    How to change active link color in navigation bar

    How to prevent css auto hyphenation for email addresses

    How to update current css version in asp.net

    How to create donut chart in pure css & svg

    How can I center a tooltip below an element that is narrower than the tooltip?

    How to adjust an image size with a progressive scaling on viewport resize

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    How to color row on specific value in angular-ui-grid?

    How to assign margin to child div to not float out of the parent div?

    How I can change the position of 3 div's to be side by side?

    AngularJS: How to unselect a span when selecting another