CSS: Element vertikal zentrieren
CSS3-Logo (Quelle: www.bobbyberberyan.com)

CSS: Element vertikal zentrieren

Es gibt leider keine CSS-Eingenschaft mit der sich ein Element vertikal zentrieren lässt. Dieser Artikel stellt eine mögliche Lösung des Problems vor.

In folgendem Beispiel wird das Element mit der ID demo-element vertikal innerhalb des Elements mit der ID demo-content zentriert. Die Höhe des Elements mit der ID demo-element muss dabei festgelegt sein um die vertikale Verschiebung nach oben bestimmen zu können. Diese Beispiel arbeitet nur mit CSS und verwendet kein JavaScript. Durch ein Überfahren der Demo mit dem Mauszeiger kann die Höhe des Elements mit der ID demo-content verändert werden.

Demo

HTML-Code

1
2
3
4
5
6
7
<div id="demo">
   <div id="demo-content">
      <div id="demo-container">
         <div id="demo-element"></div>
      </div>
   </div>
</div>
Mit einem Doppelklick kann der gesamte Code markiert werden.

CSS-Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#demo
{
   height:400px;
}

#demo-content
{
   height:400px;
   position:relative;
   top:0;
   transition:top 2s,height 2s;
   background:#ccc;
}

#demo-content:hover
{
   height:200px;
   top:100px;
}

#demo-container
{
   position:absolute;
   left:0;
   top:50%;
   width:100%;
}

#demo-element
{
   height:60px;
   width:60px;
   position:relative;
   top:-30px;
   margin:0 auto;
   background:#d22;
}
Mit einem Doppelklick kann der gesamte Code markiert werden.

Geschrieben von: Jens Richter