Bild in responsivem Layout zentrieren
Mit dem folgenden Code kann ein Bild in einem relative positionierten Container vertikal und horizontal mittig ausgerichtet werden.
<img width="500" height="335" title="" alt="" src="img.jpg" />
img {
max-height: 90%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid rgb(44,44,44);
}
Bildgalerie mit vertikal zentrierten Bildern
Mit dem folgenden Code kann eine zentriert ausgerichtete Thumbnail-Galerie erzeugt werden, deren Bilder sich vertikal mittig an einer imaginären Zeilenmitte ausrichten. Die Galerie umbricht automatisch nach gegebenen Möglichkeiten.
<div id="container">
<div class="entry">
<div class="content">
<a href="#"><img src="images/img01.jpg" style="height: 60%;"/></a>
</div>
</div>
<div class="entry">
<div class="content">
<a href="#"><img src="images/img02.jpg" style="height: 80%;"/></a>
</div>
</div>
<div class="entry">
<div class="content">
<a href="#"><img src="images/home_03.png" style="height: 80%;"/></a>
</div>
</div>
</div>
#container .entry {
display: inline-block;
}
#container .content {
display: table;
}
#container .content a {
display: table-cell;
vertical-align: middle;
height: 200px;
}
#container .content img {
width: auto;
height: auto;
}
CSS3 Variante mit transform
Auf www.css-tricks.com wurde diese nette Variante präsentiert.
.center {
position: absolute;
left: 50%;
top: 50%;
/* the magic */
transform: translate(-50%, -50%); // This may causes issues in IE, edge
/* not even necessary really. */
width: 40%;
height: 50%;
}
ACHTUNG: IE und Edge wenden die Verdrängung des Elements trotz transform so an, als ob das Objekt an seinem ursprünglichen Platz stehen würde. Dadurch kann es zum unerwarteten Einblenden der Scrollbalken kommen. In diesem Fall empfiehlt es sich die absolute Position auf bottom, right zu ändern und den transform positiv aus zu führen.