# DIV vertical zentrieren



## programmierer123 (17. Jan 2018)

Hallo,
wie schaffe ich es ein DIV vertikal zu zentrieren, so dass es, wie in der Grafik aussieht?
Mein aktueller Code:

http://user123.bplaced.net/div/


----------



## Thallius (17. Jan 2018)

```
<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;"></div>
  </div>
</div>
```

Dieser Code zentriert sowohl horizontal als auch Vertical. Nutze den Teil den du brauchst 
Gruß

Claus


----------



## thecain (17. Jan 2018)

```
display: flex;
align-items: center;
```
auf den umgebenden container


----------



## Thallius (17. Jan 2018)

thecain hat gesagt.:


> ```
> display: flex;
> align-items: center;
> ```
> auf den umgebenden container



Geht aber erst ab IE11 was ich recht gewagt finde da 3xtrem viele noch mit IE10 arbeiten...


----------



## thecain (17. Jan 2018)

Mit -ms- prefix auch der 10er, zudem seit Januar 2016 nicht mehr von Microsoft supported.



			
				microsoft hat gesagt.:
			
		

> Ab dem 12. Januar 2016 werden nur noch für die aktuelle Version von Internet Explorer, die für ein unterstütztes Betriebssystem verfügbar ist, technischer Support und Sicherheitsupdates bereitgestellt. Internet Explorer 11 ist die letzte Version von Internet Explorer. Für diese Version erhalten Sie unter Windows 7, Windows 8.1 und Windows 10 weiterhin Sicherheitsupdates, Kompatibilitätspatches und technischen Support.



Also nicht gerade extrem gewagt mMn, aber ja, wenn man darauf rücksicht nehmen muss, dann geht das nicht.


----------



## programmierer123 (18. Jan 2018)

Danke, für eure Hilfe.


----------



## programmierer123 (25. Jan 2018)

Hallo,
ich bekomme es mit Flexbox nicht hin. Das Div soll vertical zentriert werden und auf der linken Seite stehen. 

https://jsfiddle.net/tyzr83rc/1/


----------



## Thallius (25. Jan 2018)

https://jsfiddle.net/tyzr83rc/4/

mit meiner Methode funktioniert es. Du kannst allerdings nicht erwarten, dass der gedrehte Text dann am linken Rand sitzt. Ich wüßte nicht wie das gehen sollte, da items immer um ihren Mittelpunkt gedreht werden. Du müßtest dann also das Item ins negative setzen um die hälfte seiner Länge minus der hälfe der Schrifthöhe.
Mit position absolute vielleicht machbar aber nur wenn du auch die Schriftgröße fix setzt. Sonst sieht es bei jedem User wieder anders aus. Also im großen und ganzen ein recht aufwendiges Unterfangen.

Gruß

Claus


----------

