Vertikal zentrieren bei prozentualer Höhe

[André]

Hallo,
ich habe hier ein DIV, welches absolut an die Stelle 0,0 positioniert ist und jeweils die Höhe und Breite 100 % hat. Folglich deckt es also den ganzen Bildschirm ab. Das DIV ist mit „display:table-cell;“ versehen, da der Inhalt des DIVs vertikal zentriert werden soll.

Nun stehe ich allerdings vor dem Problem, dass der Inhalt des DIVs zwar in der Waagrechten zentriert wird, jedoch nicht in der Senkrechten. Es erscheint also nach wie vor ganz oben.

Wenn ich nun in dieses Table-Cell-DIV ein weiteres DIV mit einer festgelegten Pixelhöhe lege und dieses wiederum als Table-Cell auszeichne, dann wird der Inhalt dieses DIVs korrekt zentriert. Allerdings ist die Festlegung einer festen Höhe für mich keine Option.

Wie bekomme ich es denn also hin, dass der Inhalt zentriert wird, auch wenn ich die Höhe nur prozentual auf 100 % festlege?

Danke schonmal!
André

Appendix: Auszüge aus dem Code:

<style type="text/css">  
#mod_image-rotator {  
	height:150px;  
	width:200px;  
	display:table-cell;  
	vertical-align:middle;  
}  
#mod_rotating-image {  
	margin:auto auto;  
	display:block;  
}  
  
#mod_rotating-image_big_container {  
	width:100%; height:100%;  
	position:fixed;  
	left:0; top:0;  
	visibility:hidden;  
	background-color:DimGray; /* Fallback */  
	background-color:rgba(32, 32, 32, 0.75);  
	display:table-cell;  
	text-align:center;  
	vertical-align:middle;  
}  
#mod_rotating-image_big_frame {  
	padding:32px;  
	background-color:white; /* Fallback */  
	background-color:rgba(255, 255, 255, 0.80);  
	display:inline-block;  
	border-radius:15px;  
	-moz-border-radius:15px;  
	-webkit-border-radius:15px;  
}  
#mod_rotating-image_big {  
	max-width:800px; max-height:600px;  
}  
</style>

<div id="mod_rotating-image_big_container">  
	<div id="mod_rotating-image_big_frame">  
		<img id="mod_rotating-image_big" src="modules/image-rotator/loading.png">  
		<div id="mod_rotating-controls">  
			<img src="modules/image-rotator/zoom.png" onclick="FullPicture();" title="Vergrößern" alt="1:1">  
			<img src="modules/image-rotator/close.png" onclick="HideBigPic();" title="Schließen" alt="✖">  
		</div>  
	</div>  
</div>

[ChrisB]

Hi,

ich habe hier ein DIV, welches absolut an die Stelle 0,0 positioniert ist und jeweils die Höhe und Breite 100 % hat. Folglich deckt es also den ganzen Bildschirm ab. Das DIV ist mit „display:table-cell;“ versehen, da der Inhalt des DIVs vertikal zentriert werden soll.

Das kann nicht funktionieren - CSS 2.1, 9.7 Relationships between 'display', 'position', and 'float'

Wenn ich nun in dieses Table-Cell-DIV ein weiteres DIV mit einer festgelegten Pixelhöhe lege und dieses wiederum als Table-Cell auszeichne, dann wird der Inhalt dieses DIVs korrekt zentriert. Allerdings ist die Festlegung einer festen Höhe für mich keine Option.

Wie bekomme ich es denn also hin, dass der Inhalt zentriert wird, auch wenn ich die Höhe nur prozentual auf 100 % festlege?

Dazu brauchst du *noch* ein zusätzliches Element.
div { position:fixed }
  div { display:table; height:100%; width:100% }
    div { display:table-cell }

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Dazu brauchst du *noch* ein zusätzliches Element.

Nein.

Ergibt sich aus der von dir verlinkten Tabelle:

div#foo { display: table; height: 100%; position: fixed; width: 100% }  
div#foo>div { display: table-cell; vertical-align: middle }

Qapla'

[André]

Vielen Dank Euch beiden, hat wunderbar funktioniert!