Css ile birçok ortalama metodu var. Position, table ..vs. Bana göre bunların en etkilisi ve en basiti display: table kullanmak. Çünkü yüksekliği değişken olan elementlerde sorunsuz çalışıyor.

Css'te vertical-align metodu vardır fakat bu tek başına kullanıldığında istenilen sonucu vermez. Bu nedenle bir üst ve alt olarak 2 div kullanıyoruz. Üst div yani parent display:table; özelliğini alıken alt div yani child display: table-cell; özelliğini alır. Bu noktada da child için vertical-align: middle; özelliği devreye girer. Aşağıdaki örnekte nasıl kullanıldığını görebilirsiniz. Hemen altındaki cssdeck linkinden hem çalışan halini hem de görsel olarak görebilirsiniz.

<div class="parent">
    <div class="child">Css ile yatay ve dikey ortalama</div>
</div>

<style type="text/css">
    .parent {display: table; height: 100px; width:400px; background-color:#efefef; }
    .child { display: table-cell; vertical-align: middle; text-align:center; }
    child {display: inline-block; }
</style>

Canlı örneğine şu linkten bakabilirsiniz. http://cssdeck.com/labs/xjowtwdu