f2

Ein div horizintal zu zentrieren ist nicht weiter schwer, das wird durch folgendes div erreicht:

<div style=" width: 100px; margin-left: auto; margin-right: auto;">Test</div>


Nur dieses div auch noch vertikal zu zentrieren ist nicht mehr so ganz leicht. Auf der Suche danach habe ich die verschiedensten Lösungen gefunden, darunter auch verschiedene Varianten mit JavaScript. Ich möchte jedoch die Ausrichtung per CSS vornehmen. Hier finden sich in der Regel zwei Lösungen, die eine ist etwas leichter, hat jedoch den Nachteil, dass bei einem verkleinerten Browserfenster der Inhalt der Seite verschwindet, da mit negativen margin-Angaben gearbeitet wird.

Die zweite Lösung stammt von wpdfd und findet sich unter “Dead Center“. Die Idee stammt somit nicht von mir, ich möchte sie jedoch anhand eines Beispiels kurz vorstellen.

Dazu habe ich den Quellcode von wpdfd für meine Bedürfnisse angepasst, als einfaches Beispiel soll auf einer sonst leeren Seite ein Link in der Mitte erscheinen.

CSS-Quellcode:

#horizon
{
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}


An der entsprechenden Stelle wird zuerst das div “horizon” geöffnet, darin wiederum das div “content” mit dem zu zentrierenden Inhalt.

<div id="horizon">
<div id="content">
Fabian
</div>
</div>


Warum und wie das Ausrichten funktioniert, dazu findet sich eine kurze Erklärung bei der angegebenen Quelle.