Position absolute olan elementi yatay nasıl ortalayabiliriz?

Örnek element

<div class='parent'>
        <div class='elem'>Test Element</div>
</div>
.parent
{
width:100%;
} .elem
{
  width:30%;
}

Normalde site içinde bir elementi ortalamak margin:0 auto; ile sağlanıyor. Tabi ki ortalanacak olan element block element olmalı ve genişliğe sahip olmalıdır. Eğer a, span gibi elementler ortalanıcaksa bu elementlere display:block; kod satırı eklenmelidir. Çünkü bu elementler inline yani satır elementleridir block özelliğine sahip olmadan ortalanamazlar. p ve h elementleri block olmadan ortalanmış gibi gösterebiliriz. Bunların genişlikleri 100%'dür. text-align:center ile ortalanmış gibi gösterebiliriz. Ama border eklerseniz durum ortaya çıkacaktır.
margin:0 auto eğer elemente position:absolute değeri verildiğinde çalışmamaktadır bir nevi block özelliği kayboluyor. En yakın relative elemente göre pozisyon almaktadır. Eğer bir relative element yoksa tarayıcı penceresine göre pozisyon almaktadır.
Absolute elementleri ortalamak için bildiğim 2 yol bulunmaktadır.
1. JavaScript
Gerekenler
Elementin ortalanacağı alanın genişliği
Elementin kendi genişliği

var parent_width = $(".parent").width();
var elem_width = $(".elem").width(); 

Not: Parent genişliğinin yarısından element genişliği yarısını çıkarırsanız ortalanması gereken left pozisyonunu bulursunuz.

    var new_left = (parent_width / 2) - (elem_width / 2);
   $(".elem").css("left", new_left);

2. CSS
Aslında burada da yapılan javascript'in aynısı sadece css ile yapıyoruz.

Yapılan İşlem: elemente %50 left veriyoruz ve genişliğinin yarısını - margin olarak veriyoruz ve ortalanıyor.

.elem
{
width:30%;
left: 50%;
margin-left: -15%;
position:absolute;
}

Kaynak: http://www.kodstrap.com/makale/position-absolute-olan-elementi-yatay-nasil-ortalayabiliriz

İyi Kodlar!