¿Cómo diseñar un CSS para un diálogo de confirmación flotante centrado?

Question

Estoy buscando una forma de mostrar un cuadro de diálogo de confirmación que siempre se centra en la página y flota sobre la página.

intentado eso, pero no es 'siempre centrada' en absoluto, ya que la posición es fija:

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

Alguna idea? Gracias

Answer 1

Trate de usar este 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 debe ser el div contenedor del diálogo

Nota que el #centerpoint DIV debe estar dentro del th e cuerpo elemento o elementos internos que no tienen una posición : relativa; propiedad

Answer 2

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

Eso es alineación horizontal; la alineación vertical es un poco más complicada. Solo busque Google para "css vertical center" o algo así.

Answer 3

En comparación con @ respuesta de Toma, puede hacerlo en un elemento

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

<div id="theDiv" />

Esto le permite colocar en cualquier lugar de la página, independientemente de contenedores primarios y su position propiedades.

Answer 4

CSS3 transformada se puede utilizar para evitar anchura hardcoded y los márgenes: Uso

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

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