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

Question

Estoy buscando una manera de mostrar un cuadro de diálogo de confirmación que siempre esté centrado en la página, y flotando sobre la página.

Intenté eso, pero no está 'siempre centrado' 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

Intente 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 contenedor div del cuadro de diálogo

Note que el #centerpoint DIV debe estar dentro del elemento cuerpo o dentro de los elementos que no tienen un position: relative; propiedad

Answer 2

Comparado con la respuesta de @ Toma, puedes 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 colocarlo en cualquier lugar de la página, independientemente de los contenedores principales y sus propiedades de position .

Answer 3

La transformación CSS3 se puede usar para evitar anchos y márgenes codificados:

.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 de uso: http://tympanus.net/ codrops / 2013/06/25 / nifty-modal-window-effects /

Answer 4

.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 busca en Google para " css vertical center " o algo así.