web-dev-qa-db-ja.com

css絶対位置はmargin-left：autoで動作しませんmargin-right：auto

次のCSSがdivタグに適用されているとします

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

左マージンと右マージンは有効になりません

しかし、あなたが親haveを持っている場合、それはうまく機能します。

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

何故ですか？要素を中央に配置したいだけです

絶対位置でマージンを自動に設定してもうまくいかない理由を誰かが説明できますか？

htmlcsshtml5css3position
68
user1118019

編集：この答えは、絶対に配置された要素をmargin: auto;でセンタリングすることはできないと主張していましたが、これは単に真実ではありません。これは最も投票されて受け入れられた答えなので、正しいものに変更するだけだと思いました。

次のCSSを要素に適用する場合

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

次に、要素に固定幅と高さ（200pxや40％など）を指定すると、要素will自体が中心になります。

フィドル は、効果を示しています。

128
Kevin Bowersox

このトリックを使用して、絶対に配置された要素を中央に配置しました 。ただし、要素の幅を知る必要があります。

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

基本的に、left：50％を使用し、幅の半分を負のマージンで戻します。

65
chipcullen

絶対要素に幅がある場合、以下のコードを使用できます

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}
37
GilbertSun

以下のJSFiddleingを使用します。絶対位置を使用する場合、margin: 0 autoは機能しませんが、これを行うこともできます（スケーリングも行います）。

left: 50%;
transform: translateX(-50%);

更新：動作中 JSFiddle

14
Baked Inhalf

既にこの同じ問題が発生しており、コンテナ（あなたの場合は.divtagABS-container）を絶対的に配置し、その中のコンテンツ（あなたの場合は.divtagABS）を相対的に配置するソリューションを作成しました。

できた！ .divtagABSのmargin-leftおよびmargin-right AUTOが機能するようになりました。

1
Rafael Camargo

すべての回答は、提案された解決策または回避策にすぎません。しかし、まだ質問への答えを取得しないでください：なぜmargin：autoはposition：relativeで動作しますが、position：absoluteでは動作しません。

次の説明は私にとって役に立ちました。

「そのような要素は通常のフローから削除されるため、マージンは絶対的に配置された要素ではほとんど意味がありません。したがって、彼らはページ上の他の要素を押し去ることができません。このようなマージンは、マージンが適用される要素の配置にのみ影響し、他の要素には影響しません。」 http://www.justskins.com/forums/css-margins-and-absolute-82168.html

0
Alex Vovchuk