CSS Vertically & Horizontally Center Div

Question

Tôi có cửa sổ bật lên chứa biểu mẫu ASP.NET, nhấp vào liên kết "Yêu cầu thông tin" và biểu mẫu xuất hiện.

Tuy nhiên, các trang có liên kết "Yêu cầu thông tin" để kích hoạt cửa sổ bật lên có nhiều nội dung do đó cần phải cuộn để xem liên kết.

Tôi cần có div luôn được căn giữa nếu người dùng cuộn để đọc nội dung, nếu không, nếu họ không cuộn cửa sổ bật lên vẫn xuất hiện ở giữa màn hình.

div được đặt hoàn toàn, toàn bộ chiều rộng trang là 960px có lề được đặt thành 0 auto.

Answer 1

Nếu div có chiều rộng cố định và sử dụng height: (nếu width = 120px và height = 80px)

position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -60px; /* negative half of the width */ 
margin-top: -40px; /* negative half of the height */ 

Answer 2

Sử dụng vị trí: cố định; cho điều này, sử dụng 0 cho đầu, trái, phải và dưới cùng, và cung cấp cho div một màn hình: ô bảng; cũng như thế này, thiết lập text-align: center; và dọc-align: giữa; sẽ làm cho mọi thứ bên trong xuất hiện chính xác ở giữa, mà không có hacks pixel chính xác như lề tiêu cực.

Answer 3

Nếu cửa sổ bật lên div của bạn có kích thước cố định sau đó bạn có thể sử dụng CSS này:

position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
margin: auto; /* this requires a fixed size */ 

Nếu không, bạn phải đi xung quanh với màn hình: ô bảng; và những thứ tương tự.

Answer 4

Đây có phải là những gì bạn đang cố gắng làm không? http://jsfiddle.net/Hrwf8/

Chìa khóa ở đây là đặt kiểu trái và trên thành 50% và đặt lề trái và trên xuống còn âm một nửa chiều rộng và chiều cao của div. Điều này tất nhiên đòi hỏi bạn có một kích thước cố định cho div của bạn.

Answer 5

Trong CSS của bạn:

.ClassCenter { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Nguồn: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html