【Marginauto】のCSS - 使い方

を使う マージン：自動 ブロック要素を水平方向に中央揃えすることは、よく知られた手法です。しかし、なぜそれがどのように機能するのか疑問に思ったことはありますか？これに答えるために、まず最初にmargin：autoがどのように機能するのかを見てみる必要があります。ミックスでも何が 自動 垂直方向の中央揃え、およびその他のいくつかの問題に対して機能する場合は、マージンが大きくなる可能性があります。.

でもまず, なにが 自動 実際に行う?

の定義 自動 と異なります 要素, 要素タイプ そして コンテキスト. 余白に, 自動 2つのうちの1つを意味することができます：利用可能なスペースを取るか0 px。この二つの意志 要素に異なるレイアウトを定義する.

"auto"利用可能なスペースをとる

これがマージンの最も一般的な使い方です 自動 私たちはよく遭遇します。割り当てることによって 自動 要素の左右の余白に合わせて、要素のコンテナ内の使用可能な水平方向のスペースを均等に占めます。したがって、要素は中央に配置されます。.

ただし、これは横方向の余白にのみ有効です（詳細 なぜ そしてそれも 浮遊では動作しません そして インライン要素 そしてそれだけで、それも 働けない に 絶対の そして 固定配置要素 （ただし、それらを機能させる方法はわかります）.

利用可能なスペースを占有することによるのどかフロート

から 自動 左右の両方の余白で、「利用可能」なスペースを均等に占めます。 自動 それらのうちの1つだけに与えられる?

左右の余白 自動 要素が左右にフラッシュされたように見えるようにするために、 "利用可能な"スペースをすべて使用します。.

“自動” 0pxに計算

前に述べたように, 自動 浮動要素、インライン要素、絶対要素では機能しません。これらの要素はすべてすでに持っています 彼らのレイアウトを決めた, だから使用には意味がありません 自動 余白のために、そしてそれがちょうどそのように中心に置かれることを期待して.

それは次のようなものを使用するという当初の目的を無効にします 浮く. それゆえ 自動 これらの要素の値は0pxになります。.

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

値の幅 自動 持っているでしょう 0px 余白. ブロック要素の幅は、通常、その幅がコンテナの幅に達するとコンテナの幅になります。 自動 または 100％ そしてそれ故にマージン 自動 に計算されます 0px このような場合には.

価値と垂直方向のマージンがどうなるか 自動?

自動 上マージンと下マージンの両方で、常に0pxに計算されます（絶対要素を除く）。 W3Cの仕様では、このように言っています。

“もし “マージントップ” または “マージンボトム” です “自動”, 使用される値は0 "です

その理由は、まさにこれまでのところ、謎です。それは典型的な垂直ページフローが原因である可能性があります。 ページサイズが縦に増加. そのため、コンテナ内で要素を縦方向に中央揃えしても、横方向に配置されている場合とは異なり、ページ自体に対して中央揃えに表示されることはありません（ほとんどの場合）。.

そして多分それはこれと同じ理由のために、彼らはページ全体の高さに沿って垂直方向に中心を置くことができる絶対的な要素に対する例外を追加することにしました.

マージン崩壊効果（隣接要素の崩壊）も原因の可能性があります。” 縦の余白の別の例外です.

しかし、後者はあまりあり得ないケースのようです - 余白を折りたたまない要素はFloatsのように、そして要素は オーバーフロー 以外 見える, まだ0pxの垂直余白を割り当てます 自動.

絶対配置要素のセンタリング

絶対位置の要素には例外があるので、”使用する 自動 垂直方向と水平方向に中央に配置する値です。しかしその前に、私たちはいつ意志を見つける必要があります マージン：自動 実際には、絶対位置に配置された要素でやりたいように動作します。.

これが、別のW3C仕様が登場するところです。

「3人とも “左”, “幅”, そして “右” あります “自動”：最初に設定 “自動” の値 “余白” そして “余白権” 0まで… 「

「三つのどれもが “自動”：両方の場合 “余白” そして “余白権” あります “自動”, 2つのマージンが等しい値になるという追加の制約の下で方程式を解く

ということは、 水平 自動 余白 等しいスペースをつかむために の値 左, 幅 そして 右 してはいけません 自動 , デフォルト値だから私たちがしなければならないのは、絶対的に位置づけられた要素でそれらに何らかの値を与えることです。. 左 そして 右 すべきだった 完全なセンタリングのために等しい値.

この仕様では、垂直マージンについても同様のことが言及されています。.

“3つとも “上”, “高さ”, そして “底” 自動です、設定 “上” 静止位置に… ”

“3つのどれもない場合 “自動”：両方の場合 “マージントップ” そして “マージンボトム” あります “自動”, 2つのマージンが等しい値になるという追加の制約の下で方程式を解く… ”

したがって、絶対要素は 垂直方向の中央揃え, その 上, 高さ, そして 底 値があってはいけません 自動.

今これらすべてを組み合わせることによって、これは私たちのものです”取得する：

結論

次の要素を折り返さずにページ上の要素を右または左にフラッシュしたい場合は（floatを使用した場合のように）、使用するオプションがあることを忘れないでください。 自動 マージン用.

垂直方向の中央に配置できるように要素を絶対値に変換することは、あまりお勧めできません。 flexboxやCSS変換のような、それらに適した他のオプションがあります。.