Comment concevoir un CSS pour un dialogue de confirmation flottant centré?

Question

Je cherche un moyen d'afficher une boîte de dialogue de confirmation toujours centrée sur la page et flottant au-dessus de la page.

J'ai essayé, mais ce n'est pas du tout "toujours centré", car la position est fixe:

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

Une idée? Merci

Answer 1

Essayez d'utiliser ce 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 doit être la division conteneur de la boîte de dialogue

Notez que la #centerpoint DIV doit être à l'intérieur de l'élément body ou à l'intérieur d'éléments qui ne possèdent pas de position: relative; propriété

Answer 2

Par rapport à la réponse de @ Toma, vous pouvez le faire sur un élément

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

<div id="theDiv" />

Cela vous permet de le placer n'importe où sur la page, quels que soient les conteneurs parents et leurs propriétés position .

Answer 3

La transformation CSS3 peut être utilisée pour éviter la largeur et les marges codées en dur:

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

Exemple d'utilisation: http://tympanus.net/ codrops / 2013/06/25 / nifty-modal-window-effects /

Answer 4

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

C'est l'alignement horizontal; l'alignement vertical est un peu plus délicat. Il suffit de faire une recherche Google pour "css vertical center". ou quelque chose.