Jak zaprojektować CSS dla wyśrodkowanego pływającego okna potwierdzenia?

Question

Szukam sposobu na wyświetlenie okna dialogowego potwierdzenia, które jest zawsze wyśrodkowane na stronie i pływające po stronie.

Próbowałem, ale nie jest to „zawsze skoncentrowane” w ogóle, ponieważ pozycja jest ustalona:

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

jakiś pomysł? Dzięki

Answer 1

Spróbuj użyć tego 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 powinna być div pojemnik dialogowym

Uwaga że #centerpoint DIV powinny być w środku e body element lub elementy wewnętrzne, które nie mają pozycji : względne; nieruchomość

Answer 2

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

to poziome wyrównanie; Wyrównanie w pionie jest nieco trudniejsze. Po prostu Google za "centrum pionowe css" lub coś takiego.

Answer 3

porównaniu @ odpowiedź Toma, można to zrobić na jednym elemencie

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

<div id="theDiv" />

ta pozwala na umieszczenie go w dowolnym miejscu na stronie, niezależnie od pojemników dominujących i ich position nieruchomości.

Answer 4

CSS3 przekształcić mogą być stosowane w celu uniknięcia szerokość sztywno i marginesy:

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

Przykład użycia: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/