Cześć,

Kiedyś poycjonowałem jakiś element do środka kontenera za pomocą kilku kontenerów dodatkowych, atrybutu position oraz top ustawione na 50%. Niestety wyleciało mi to z głowy i zupełnie nie jestem w stanie sobie tego przypomnieć.

[HTML] pobierz, plaintext 
<style type="text/css">
	.container { width:500px; height:100px; border:1px solid #000; background:#FF0000; }
	.wrp-outer { position:relative; top:0; height:50%; width:100%; background:#CCC; }
	.wrp-inner { position:absolute; width:100%; bottom:0; border:0; background:#FFFF00; }
	.wrp-inner span { position:relative; top:100%; background:#000; color:#FFF; }
</style>
<div class="container">
	<div class="wrp-outer">
		<div class="wrp-inner">
			<span>To ma isc do srodka!</span>
		</div>
	</div>
</div>
[HTML] pobierz, plaintext 

Ustawiało się to jakoś tak, że span przesuwał się o połowę wysokości wrp-inner w dół dzięki czemu tekst był wpozycjonowany do środka. Jednak z tego co zauważyłem ( pewien nie jestem ) tekst przesuwa się o wysokość wrp-outer. Szczerze powiedziawszy nie jestem pewien czy nie trzeba było ustawiać na sztywno wysokości dla span'a lub wrp-inner, ale mam nadzieję że da się to jakoś obejść.

Możesz do klasy wrp-inner span dopisać display: block; text-align: center;

Kod po zmianach:

[CSS] pobierz, plaintext 
.wrp-inner span { display: block; text-align: center; position:relative; top:100%; background:#000; color:#FFF; }
[CSS] pobierz, plaintext