[解決済み] 100%幅のdiv内に絶対位置指定された要素を水平方向にセンタリングするにはどうすればよいですか？[重複]を

質問

下の例では #logo は絶対位置で、水平方向は #header . 通常、私は margin:0 auto のように、相対的に配置された要素のために、私はここで立ち往生しています。どなたか方法を教えていただけませんか？

JSフィドル http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

どのように解決するのですか？

左の属性に中央揃えしたい場合。

トップアライメントも同様で、margin-top: (divの幅/2)を使用することができます。

header要素にposition:relativeを設定することが重要です。

これを試してみてください。

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

もし、計算を使用したくない場合は、このようにすることもできます。

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

デモ2