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:

Photo by Pablò on Unsplash

Zurück