Wie zentriert man das Bild mit unbekannter Größe innerhalb div?

Question

So habe ich die div mit diesen Parametern:

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

Es das Bild enthält mit unbekannter Größe (die Größe ist dinamic und es kann anders sein).

Ich muss das Bild vertikal und horizontal ausrichten.

Bitte,

Answer 1

Verfahren Hintergrundbild arbeiten, mit Hintergrund-Position: mitte, leider werden Sie die Kontrolle über die Skalierung Ihres Bildes verlieren.

können Sie Ihr Bild wie folgt festgelegt:

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

PS. Beachten Sie, dass dies relativ zu seinem nächsten positionierten Elternteil zentriert ist.

Answer 2

Die einfachste Cross-Browser-Art und Weise Ihres dynamisches Bild als Hintergrund-Eigenschaft auf den #container einstellen würde helfen:

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

Answer 3

Fügen Sie die folgende: zwei

Die erste Linien zentrieren sie vertikal, die letzten horizontal.

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

weitere Informationen finden Sie hier: http://www.w3.org/Style/Examples/007/center

Answer 4

Dies wird Mitte vertikal und horizontal.

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

http://jsfiddle.net/nfBDT/

Answer 5

ich glaube der einfachste Weg, dies zu tun ist:

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

.Behälter passen Sie Ihre div passen

oh ich lese nicht alles (nicht sicher, ob Ihnen eine Klasse oder ID war) deiner Frage.

dies scheint zu funktionieren:

<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]--> 

volle Punktzahl: http://www.brunildo.org/test/img_center.html

Answer 6

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

Dies ist ein recht ordentliches Beispiel. Normalerweise verwenden Sie table/vertical-align für moderne Browser und positionieren +% s für IE.