1. ホーム
  2. html

[解決済み] margin-left:auto margin-right: autoでCSSの絶対位置が効かなくなる。

2023-03-16 16:06:27

質問

divタグに以下のようなCSSが適用されているとします。

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right: auto;
}

その margin-leftmargin-right は有効になりません。

が、relativeであれば問題なく動作します すなわち

.divtagREL {
    position: relative;
    margin-left: auto;  
    margin-right: auto;
}

なぜでしょう?私はただ要素を中央に配置したいだけです。

絶対位置でマージンをautoに設定してもうまくいかないのはなぜか、誰か説明してください。

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

EDIT : この回答は、絶対位置指定された要素をセンタリングすることはできないと主張していました。 margin: auto; で絶対位置指定された要素を中央に配置することはできないと主張していましたが、これは単に真実ではありません。これは最も多く投票され、受け入れられている答えなので、私は正しいものに変更することを決めました。

ある要素に以下のCSSを適用した場合

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

そして、200pxや40%など、固定の幅と高さを与える、要素 が中央に配置されます。

ここで フィドル で、その効果を実証しています。