[Roundup] Element horizontal und vertikal zentrieren

[ali]

Hallo

wenn ich ein img1 habe mit width 456px und height 456px wie kann ich es dann genau mittig positionieren unabhängig von der screengröße? top und left werden wohl in % angegeben werden?

Ali

#img1{
position: absolute;
top: ???
left: ???
margin: ???
padding: ???
width: 456px;
height: 456px;
}

 

[orhan]

Dass man das nicht selbstständig mit Google an der Seite in Erfahrung bringen kann?!

Denn Beispiele, die genau auf deinen Codesnippet abzielen/zugeschnitten sind, finden sich im Netz en masse.

Aber neben der absoluten Positionierung (in der Vertikalen hiesse es im CSS dann top:50%; margin-top:-228px;*height:456px), bietet CSS noch weitere, z.T. profane, Techniken, um eine vertikale Zentrierung zu realisieren (horizontal ist hier eigtl. nicht der Rede wert: text-align:center für's Elternelement des <img>, oder <img> mit display:block u. margin:auto ausstatten).

Die alternativen CSS-Eigenschaften wären: (1.) padding, (2.) line-height, (3.) vertical-align:middle in Verbindung mit display:table|table-cell, (4.) display:flex u. align-items: center (Flexbox-Modell), oder (5.) calc(), um unbekannte Dimensionen / Abstände im Viewport rechnerisch zu ermitteln.

Es soll ja bekanntlich in der Praxis auch zu Anwendungsfällen kommen, in denen Breite/Höhe des zu zentrierenden Elements im Vorfeld überhaupt nicht bekannt ist, und diese Variante somit nicht mehr zu gebrauchen ist.

Zudem birgt sie die große Gefahr, dass der zentrierte Content für den Nutzer mit der Maus nicht mehr greifbar ist, sobald das Browserfenster die Dimensionen des Elements unterschreitet - ein Scrollbalken erscheint in diesem Fall dann auch nicht, weil die absolute Positionierung den normalen Textfluss des Elements aufgehoben hat.

Die Details zu all diesen Methoden/Techniken kannst du diesem (gekürzten) Fundus an Quellen entnehmen (Domainname alphabetisch sortiert):
https://brunildo.org/test/img_center.html
https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
http://gitmeet.com/post/7-ways-to-position-image-in-dead-center-vertical-horizontal-using-css
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
http://vanseodesign.com/css/vertical-centering/
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_center
https://www.w3schools.com/css/css_align.asp
...

* Die Angabe für margin-top|left beträgt hier immer die negative Hälfte von height|width, und verrückt das Element im Viewport an die vorgesehene Position, weil sich die Startpositionen top:50% und left:50% auf die Aussenkanten des Elements beziehen, und es folglich im Viewport außermittig erscheinen würde (nach rechts-unten versetzt).

In diesem Beispiel kommt die schicke Flexbox zum Zug
https://jsfiddle.net/SpiceLab/eo1xvusg/

 

[ali]

Hallo,

um die von SpiceLab vorgeschlagenen Methoden noch etwas zu ergänzen diese Methoden:

Problem mit Scrollbalken

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Kein Problem mit fehlenden Scrollbalken:

.wrapper {
    display: table;
}

.center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}

Grüße