Erzwinge ein Bild, um IMMER in der Mitte eines Div zu bleiben

Question

Ich suche Wege, um ein Bildelement zu zwingen immer in der Mitte eines div ausgerichtet bleiben, auch wenn das div-Element zu klein wird, um das Bild richtig zu zentrieren. Hier ist eine Erklärung, was ich tun möchte: Question.jpg

Ich brauche die Lösung, um rein CSS zu sein, wenn möglich?

Answer 1

diese Zentrierung Trick benutzen, sollten Sie geben, was Sie wollen:

img { 
    position:relative; (or absolute, it depends on your needs) 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
} 

Dies hält das Bild zentriert, egal wie groß der Behälter ist passt die Größe des Bildes jedoch nicht an. Basierend auf diesem Bild scheint es, als hättest du das nicht gewollt.

Answer 2

Sie können dies mit dem Display flex tun.

div { 
 
    width: 100%; 
 
    height: 500px; 
 
    border: 1px solid gray; 
 
    display: flex; 
 
    align-items: flex-start; 
 
    text-align: center; 
 
} 
 
img { 
 
    align-self: center; 
 
    margin: 0 auto; 
 
}

<div> 
 
    <img src="http://screenshots.en.sftcdn.net/en/scrn/323000/323026/angry-birds-theme-02-100x100.png" alt=""> 
 
</div>

Answer 3

Verwenden Sie das folgende Raster-Layout und Stile:

style{ 
    .container{ max-width:800px; margin:0 auto;} 

} 

@media 
only screen and (max-width:600px) { 
.mCenter{margin:0 auto;} 
.mImage600:{width:100%; height:auto;} 
} 

<div class=container> 
<div class=mCenter> 
<img class=mImage600 src 'img.jpg' width=600 > 
</div> 
<div> 

Answer 4

Fiddle

img{ 
    margin: 0 auto; 
}