Làm cách nào để căn giữa hình ảnh với kích thước không xác định bên trong div?

Question

Vì vậy, tôi có div với các thông số:

container { 
position:fixed; 
background-color: rgba(50,50,50,0.7); 
width:100%; 
height:100%; 
display:none;} 

Nó chứa các hình ảnh với chưa biết kích thước (kích thước là dinamic và nó có thể khác nhau).

Tôi cần căn chỉnh hình ảnh theo chiều dọc và chiều ngang.

Xin vui lòng, giúp

Answer 1

Phương pháp hình nền sẽ làm việc, với background-position: trung tâm trung tâm, không may bạn sẽ mất quyền kiểm soát rộng hình ảnh của bạn.

Bạn có thể đặt hình ảnh của bạn như sau:

position:absolute; 
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 

PS. Lưu ý rằng điều này sẽ được căn giữa tương ứng với số gần nhất của nó vị trí cấp độ gốc.

Answer 2

Cách qua trình duyệt đơn giản nhất sẽ được thiết lập hình ảnh động của bạn như một tài sản nền trên #container:

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div> 

Answer 3

Thêm dòng sau:

Hai đầu tiên dòng trung tâm theo chiều dọc, chiều dọc theo chiều ngang.

display: table-cell; 
vertical-align: middle ; 
text-align: center; 

biết thêm có thể được tìm thấy ở đây: http://www.w3.org/Style/Examples/007/center

Answer 4

này sẽ tập trung theo chiều dọc và chiều ngang.

#container { 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
} 

http://jsfiddle.net/nfBDT/

Answer 5

tôi tin rằng cách dễ nhất là để làm điều này:

.container img { 
    display:block; 
    margin:auto; 
} 

điều chỉnh cho phù hợp với .container div của bạn (không chắc chắn nếu bạn là một lớp hoặc ID)

oh Tôi đã không đọc tất cả về câu hỏi của bạn.

này dường như làm việc:

<style type="text/css"> 
.wraptocenter { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: ...; 
    height: ...; 
} 
.wraptocenter * { 
    vertical-align: middle; 
} 
/*\*//*/ 
.wraptocenter { 
    display: block; 
} 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
    width: 1px; 
} 
/**/ 
</style> 
<!--[if lt IE 8]><style> 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
} 
</style><![endif]--> 

tín dụng đầy đủ: http://www.brunildo.org/test/img_center.html

Answer 6

http://zoffix.com/new/absolute-center-random-width-height.html

Đây là một ví dụ khá tốt. Thông thường, bạn sử dụng sắp xếp bảng/dọc cho các trình duyệt hiện đại và vị trí +% s cho IE.