Absolut positionierte Element mit CSS zentrieren
- Snippets
Mit Hilfe von CSS-Transforms lassen sich auch absolut positionierte Elemente zentrieren. Im folgenden Beispiel ist der weisse Kasten absolut positioniert.
Dies entspricht in HTML:
<div class="demowrapper">
<div class="demobox"></div>
</div>
Und das dazugehörige CSS:
.demowrapper {
width:200px;
height:200px;
background:#ccc;
}
.demobox {
width:40px;
height:40px;
background:#FFF;
border:1px solid #666;
position:absolute;
}
Um die weisse Box trotz absoluter Positionierung horizontal und vertikal zu zentrieren, muss das Elternlement "demowrapper" ein zusätzliches "position:relative;" erhalten und das CSS des Kindes "demobox" wie folgt erweitert werden:
.demobox {
width:40px;
height:40px;
background:#FFF;
border:1px solid #666;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
Im Ergebnis wird die weisse Box nun zentriert:
Bildnachweis:
Hinweis: Wie immer gilt, dass für das Funktionieren dieser Snippets keinerlei Haftung oder Gewährleistung übernommen wird.