Ausführliche Erläuterung eines Beispiels für die vertikale Zentrierung von Bildern unbekannter Größe mithilfe von reinem CSS

Im vorherigen „Taobao UED Recruitment“ gab es eine solche Frage:

„Verwenden Sie reines CSS, um Bilder unbekannter Größe (aber der Höhe) zu implementieren und Breite Beide sind kleiner als 200 Pixel) horizontal und vertikal zentriert in einem 200 Pixel großen quadratischen Container "

Natürlich ist die Frage nicht willkürlich, sondern hat ihre eigenen praktischen Gründe. Die vertikale Zentrierung ist ein Problem, das am häufigsten auftritt Taobao-Arbeit, sehr repräsentativ.

Die Schwierigkeit der Frage liegt in zwei Punkten:

Vertikal zentriert;
Das Bild ist ein Ersatzelement und weist einige Besonderheiten auf.
Was die Lösung angeht, hier ist ein Kompromiss einer relativ strukturell sauberen, einfachen CSS-Lösung:

.box {

display: table-cell;
Vertical -align: middle;

text-align:center;

*display: block;
*font-size: 175px;
*font- family:Arial ;

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

Vertical- align:middle ;
}

2. Hintergrundmethode

Der Hintergrund Methode ist einfach, aber nicht für den dynamischen Import geeignet

3. Hintergrundmethode

.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
Vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
Vertical-align:middle
}
.qq img {
Vertical-align:middle;
}

Diese Art. Die Methode ist ebenfalls sehr einfach, aber Sie müssen ein zusätzliches Tag von hinzufügen.