CSS で margin:auto は何を意味しますか? margin:auto属性の使い方の詳しい説明

margin:auto を使用すると要素を水平方向に中央揃えできることは誰もが知っています。しかし、なぜ margin:auto を使用すると要素が水平方向に中央に配置されるのか考えたことはありますか? この質問に答えるには、まず margin:auto がどのように機能するかを確認する必要があります。自動が縦方向のセンタリングに適している場合、具体的な内容を見てみましょう。

まず、auto は何をするのでしょうか?

auto 要素を定義します。要素のタイプとコンテキストによって異なります。マージンでは、auto には 2 つの意味があります。利用可能なスペースを占有すること、または 0 ピクセルを占めることです。これら 2 つは、要素の異なるレイアウトを定義します。

利用可能なスペースを「自動的に」占有します

これは auto を使用する最も一般的な方法です。 auto 要素の左右のマージンを割り当てることにより、要素のコンテナ内で利用可能な水平方向のスペースが均等に占有されるため、要素は中央に配置されます。

<div id="outer">
<div id="inner"></div>
</div>

#inner {
  margin: auto;
  width: 250px;
  height: 125px;
  background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer {
  height: 500px;
  width: 500px;
  background: #1F1D20;
  background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
  background-size: 25px 25px;
}

効果は次のとおりです:

ただし、これは水平方向のマージンでのみ機能し、フローティング要素やインライン要素では機能しません。単独では機能しません。絶対的かつ固定的に配置された要素に使用されます。

推奨マニュアル: CSSオンラインマニュアル

autoのみを使用すると、autoの左右の余白が「利用可能な」スペースを均等に占有するため、それが起こったらどうなると思いますか？

左マージンまたは右マージンを自動にすると、すべての「利用可能な」スペースが占有され、要素が右または左にオフセットして見えるようになります。

<div id="outer">
<div id="inner"></div>
</div>

rrree

効果は次のとおりです:

"auto" は 0px

前述したように、autoは float であり、インライン要素および絶対要素では機能しません。これらの要素はすべて、レイアウトがすでに決定されているため、マージンを自動で指定したり、このように中央に配置されることを期待したりすることはありません。

これでは、float のようなものを使用する本来の目的が損なわれてしまいます。したがって、これらの要素の auto 値を 0px に設定します。

auto は、幅がない一般的なブロック要素でも機能しません。これまでに示した例にはすべて幅があります。

値の幅 auto には 0px のマージンが含まれます。ブロック要素の幅は通常、そのコンテナ全体をカバーし、auto または 100% であるため、margin:auto は 0px に設定されます。

自動を縦に設定するとどうなるでしょうか?

auto は、常に上下のマージンで 0px と評価されます (絶対要素を除く)。 W3C 仕様には次のように記載されています:

「"margin-top" または "margin-bottom" が "auto" の場合、その使用値は 0 です」

これまでのところ、これがなぜであるか言われていない。これはおそらく、高さ方向にページ サイズが増加する典型的な垂直方向のページ フローが原因と考えられます。したがって、要素をページ自体に対してコンテナ内で垂直方向に中央揃えにしても、(ほとんどの場合) 水平方向に行う場合とは異なり、要素が中央に表示されることはありません。

おそらく同じ理由で、ページの高さ全体にわたって垂直方向の中央に配置できる絶対要素の例外を追加することにしました。

これは、垂直マージンのもう 1 つの例外である、エッジの崩壊効果 (隣接する要素の「エッジ」の崩壊) によるものである可能性もあります。

ただし、後者は可能性の低いシナリオのようです。フロートやオーバーフローなど、マージンが折りたたまれない要素には、表示されている他の要素が依然として 0px の垂直マージンが自動的に割り当てられているためです。

おすすめの関連記事:
1.CSS でマージンが機能しない原因と解決策
おすすめの関連ビデオ:
1.CSS ビデオ チュートリアル - 翡翠少女般若心経編

絶対配置要素を中心に

絶対配置要素が発生するため、例外として、auto 値を使用して垂直方向と水平方向の中央を中央に配置します。しかしその前に、絶対位置の要素で margin:auto が実際にいつ希望どおりに機能するかを確認する必要があります。

ここで別の W3C 仕様が登場します:

""left"、"width"、"right" の 3 つすべてが "auto" の場合: 最初に " 任意の "auto" 値を追加します。 margin-left" と "margin-right" の値が 0 に設定されます... 3 つのどれも "auto" でない場合は "

": "margin-left" と "margin -right" が両方ともである場合"auto" の場合、2 つのマージンが等しい値を取得するという追加の制約を使用して方程式が解決されます。"

これは、水平方向の auto のマージンでは、キャッチ間隔が等しいことをほぼ示しています。その後、値がleft、width、right はデフォルト値である auto であってはなりません。したがって、私たちがしなければならないことは、絶対に配置された要素に何らかの値を与えることだけです。完璧なセンタリングを実現するには、左右の値が同じである必要があります。

仕様書には、垂直方向の余白についても言及されています。

"「top」、「height」、「bottom」の 3 つがすべて自動の場合、「top」を静的位置に設定します..."

“如果三者中没有一个是”自动“：如果”margin-top“和”margin-bottom“都是”auto“，则在额外约束下解决方程式，即两个边距得到相等的值......”

因此，对于一个绝对元件被垂直居中，其top，height和bottom值不应该auto。

现在结合所有这些，这是我们将得到的：

<div id="outer">
<div id="inner"></div>
</div>

HTML
 
CSS
Result
EDIT ON#inner {
  margin: auto;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  width: 250px;
  height: 125px;
  background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer {
  position: relative;
  height: 500px;
  width: 500px;
  background: #1F1D20;
  background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
  background-size: 25px 25px;
}

效果如下：

最后

如果您想要将页面上的元素向右或向左偏移而没有包含它的其他元素（就像浮点数一样），请记住有auto用于边距的选项。

将元素转换为绝对定位只是为了使它可以垂直居中可能不是一个好主意。还有其他选项，如flexbox和CSS变换，更适合那些。

以上がCSS で margin:auto は何を意味しますか? margin:auto属性の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。