Bild in der Mitte und in der Mitte des div ausrichten

Question

Ich habe folgendes Div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

Wie kann man das Bild so ausrichten, dass es sich in der Mitte und im Zentrum des div befindet?

Answer 1

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

JSFiddle

Answer 2

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

Answer 3

Dies kann auch mit Hilfe des Flexbox-Layouts geschehen:

STATISCHE GRÖSSE

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

DYNAMISCHE GRÖSSE

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

Ich fand das Beispiel in diesem Artikel , in der die Verwendung des Layouts sehr gut erklärt wird.

Answer 4

Mir scheint, dass Sie auch wollten, dass das Bild vertikal im Container zentriert wird. (Ich habe keine Antwort gesehen, die das vorsah)

Working Fiddle:

1. Reine CSS-Lösung
2. Keine Unterbrechung des Dokumentflusses (keine Floats oder absolute Positionierung)
3. Browserübergreifende Kompatibilität (sogar IE6)
4. Vollkommen ansprechbar.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Anmerkung: Diese Lösung eignet sich für die Ausrichtung eines beliebigen Elements innerhalb eines Elements. für IE7, wenn Sie die .Centered Klasse auf Blockelementen, müssen Sie einen weiteren Trick anwenden, um die inline-block arbeiten. (das, weil IE6/IE7 nicht gut mit inline-block auf Block-Elemente spielen)

Answer 5

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