Wie man ein Bild zentriert (vertikal und horizontal) innerhalb eines größeren div

Question

Ich habe ein Div 200 x 200 px. Ich möchte ein 50 x 50 px Bild direkt in der Mitte des div platzieren.

Wie kann man das machen?

Ich kann es horizontal zentriert bekommen, indem ich text-align: center für die div. Aber die vertikale Ausrichtung ist das Problem

Answer 1

Arbeiten in alten Browsern (IE >= 8)

Absolute Position in Kombination mit automatischem Rand erlaubt es, ein Element horizontal und vertikal zu zentrieren. Bei der relativen Positionierung kann die Elementposition auf der Position eines übergeordneten Elements basieren. Ergebnis anzeigen

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 2

Ich persönlich würde es als Hintergrundbild innerhalb des Divs platzieren, das CSS dafür ist:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Geht von einem Div mit id="demo" da Sie bereits die folgenden Angaben machen height y width Hinzufügen einer background sollte kein Problem sein)

Überlassen Sie dem Browser die Arbeit.

Answer 3

Eine andere Möglichkeit ist die Erstellung einer table con valign natürlich. Dies würde unabhängig davon funktionieren, ob Sie die Höhe des Divs kennen oder nicht.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

aber Sie sollten sich immer nur auf css wann immer möglich.

Answer 4

Ich würde Ihr größeres div mit position:relative; dann machen Sie für Ihr Bild Folgendes:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Dies funktioniert nur, wenn Sie die Abmessungen des Bildes und des enthaltenen Divs kennen. Auf diese Weise können Sie auch andere Elemente in das enthaltende Div einfügen... wo Lösungen wie die Verwendung von Zeilenhöhe nicht möglich sind.

EDIT : Beachten Sie, dass die Ränder negativ sind und die Hälfte der Größe des Bildes ausmachen.

Answer 5

Dies funktioniert korrekt:

display: block;
margin-left: auto;
margin-right: auto 

Wenn Sie mit der obigen Methode nur eine horizontale Zentrierung erhalten, können Sie auch dies versuchen:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}