Comment concevoir un CSS pour une boîte de dialogue de confirmation flottante centrée?

Question

Je cherche un moyen d'afficher une boîte de dialogue de confirmation qui est toujours centrée sur la page et qui flotte sur la page.

essayé, mais ce n'est pas « toujours centrée » du tout, étant donné que la position est fixée:

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

Toute idée? Merci

Answer 1

Essayez d'utiliser cette 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 devrait être le conteneur div de la boîte de dialogue

Remarque que le #centerpoint DIV devrait être à l'intérieur e corps élément ou éléments intérieurs ne possèdent pas de position : relative; propriété

Answer 2

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

C'est l'alignement horizontal; l'alignement vertical est un peu plus délicat. Juste Google autour de "centre vertical css" ou quelque chose.

Answer 3

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 indépendamment des conteneurs parents et leur position Propriétés.

Answer 4

CSS3 transformer peut être utilisé pour éviter la largeur hardcoded et des marges:

.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/