Come progettare un CSS per una finestra di dialogo di conferma fluttuante centrata?

Question

Sto cercando un modo per visualizzare una finestra di conferma che è sempre centrata sulla pagina e mobile sulla pagina.

provato, ma non è 'sempre centrato' a tutti, in quanto la posizione è fissa:

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

Qualche idea? Grazie

Answer 1

Provare a utilizzare questa 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 dovrebbe essere il contenitore div della finestra di

Nota che il #centerpoint DIV dovrebbe essere dentro th e corpo elemento o elementi interni che non hanno una posizione : relativa; proprietà

Answer 2

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

Questo è l'allineamento orizzontale; l'allineamento verticale è un po 'più complicato. Solo Google in giro per "centro verticale css" o qualcosa del genere.

Answer 3

Rispetto al @ risposta di Toma, lo si può fare su un elemento

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

<div id="theDiv" />

Questo consente di posizionare in qualsiasi punto della pagina indipendentemente contenitori padre e la loro position proprietà.

Answer 4

CSS3 trasformare può essere utilizzata per evitare la larghezza hardcoded e margini: l'utilizzo

.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%); 
} 

Esempio: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/