Làm cách nào để thiết kế CSS cho hộp thoại xác nhận thả nổi ở giữa?

Question

Tôi đang tìm cách hiển thị hộp thoại xác nhận luôn nằm ở giữa trang và thả nổi trên trang.

Cố gắng đó, nhưng nó không phải luôn luôn làm trung tâm "ở tất cả, kể từ vị trí được cố định:

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

Bất kỳ ý tưởng? Cảm ơn

Answer 1

Hãy thử sử dụng CSS này

#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 nên div container của hộp thoại

Note rằng #centerpoint DIV nên ở bên trong e phần tử cơ thể hoặc bên trong mà không có vị trí : tương đối; tài sản

Answer 2

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

Đó là căn chỉnh ngang; liên kết dọc là một chút phức tạp hơn. Google chỉ dành cho "trung tâm dọc css" hoặc một cái gì đó.

Answer 3

So với @ Toma câu trả lời, bạn có thể làm điều đó trên một yếu tố

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

<div id="theDiv" />

này cho phép bạn đặt nó ở bất cứ đâu trên trang bất kể container phụ huynh và position của họ tính chất.

Answer 4

CSS3 transform có thể được sử dụng để tránh rộng hardcoded và lợi nhuận:

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

Ví dụ sử dụng: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/