Zentrieren eines Bildes auf dem Bildschirm mit CSS - Zufällige Bildschirm-/Bildabmessungen

Question

Ich muss eine Webseite erstellen, die für die Zwecke dieser Frage ein einzelnes Bild darstellt, das sowohl vertikal als auch horizontal in der Mitte des Bildschirms zentriert ist. Sie hat die folgenden Anforderungen:

• Die Bildschirmgröße des Clients ist unbekannt (mobil)
• Das Bild ist benutzerdefiniert und hat daher unbekannte Abmessungen
• Das Bild muss auf allen Geräten sowohl vertikal als auch horizontal perfekt zentriert sein
• Die Bildzentrierung muss auch bei einer Drehung des Bildschirms (z. B. vom Hoch- ins Querformat) erhalten bleiben.

Als ein bisschen ein CSS-Neuling, ging ich und erstellt diese die einzige Art, wie ich wusste, wie, mit Javascript, um den Inhalt zu positionieren: http://jsfiddle.net/error454/8YL9a/

Ich bin auf der Suche nach einer Lösung, die genauso funktioniert wie meine Lösung, aber CSS statt harter Gleichungen verwendet.

Answer 1

display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

CSS3-Eigenschaft, schlechte Unterstützung: webkit, mozilla. Der einzige Weg, es mit sauberen Markup und CSS ohne JS zu tun.

bearbeiten 1 : http://jsfiddle.net/t8qtn/6/

edit 2: Um für die Zukunft gerüstet zu sein, lautet die Version ohne Präfix

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;

Answer 2

Dies ist ein schöner Artikel über Zentrierung: http://www.w3.org/Style/Examples/007/center.en.html

Sie sollte etwa so lauten:

.vcenter { display:table-cell; vertical-align:middle; }
.hcenter { display:block; margin-left:auto; margin-right:auto; }

Wenden Sie dann beide Klassen auf Ihr Bild an:

<img class="vcenter hcenter" src="..."/>

Aktualisierung: Sie könnten einfach eine Tabelle wie die folgende verwenden http://www.sorinvasilescu.ro/