Wie ein CSS für einen zentrierte floating Bestätigungsdialog zu entwerfen?

Question

ich nach einer Möglichkeit, einen Bestätigungsdialog angezeigt werden, die immer auf der Seite zentriert sind, und schwebend über die Seite.

versucht, aber es ist überhaupt nicht ‚immer zentriert‘, da die Position festgelegt ist:

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

Jede Idee? Dank

Answer 1

Versuchen

mit diesem 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 sollte der Behälter div des Dialogs sein

Hinweis , die #centerpoint DIV sollte innerhalb der Körper Element oder innerhalb Elemente sein, dass haben nicht ein position: relative; Eigenschaft

Answer 2

Im Vergleich zu @ Toma Antwort, können Sie es auf einem Element tun

#theDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    height: 50px;
    margin-top: -25px;
    background: yellow;
}

<div id="theDiv" />

Auf diese Weise können Sie es überall auf der Seite platzieren, unabhängig von übergeordneten Containern und den position Eigenschaften.

Answer 3

CSS3-Transformation kann verwendet werden, hartcodierte Breite und Margen zu vermeiden:

.dialog {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

Beispiel Nutzung: http://tympanus.net/ codrops / 2013/06/25 / geschickten-modal-Fenster-Effekte /

Answer 4

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

Das ist, horizontale Ausrichtung; vertikale Ausrichtung ist ein wenig komplizierter. Gerade Google um für „css vertikale Mitte“ oder so etwas.