Wie ein CSS für einen zentrierte floating Bestätigungsdialog zu entwerfen?
Frage
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
Lösung
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
Andere Tipps
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.
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 /
.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.