css - 要素を中央に配置する

Question

絶対位置が center の要素を設定したいのですが、要素の位置が絶対位置でない場合は、次のようにできます。

            margin : 0 auto;

しかし、位置が絶対的な要素に対して同じことを行うにはどうすればよいでしょうか?

Answer 1

.target {
    position: absolute;
    left: 50%;   /* set left */
    width: 500px;  /* give width */
    margin-left: -250px; /* margin-left = width/2  */
}

その親を次のように設定しますposition: relative

デモ

サンプル jQuery アプローチ:

var width = $('.target').width();
$('.target').css({
    left: '50%',
    'margin-left': -(width / 2)
});

デモ