margin：0 autoでautoは何をしますか？

何をしautoますmargin:0 auto;か？

どういうことか分かりautoません。時々、オブジェクトをセンタリングする効果があることを知っています。ありがとう。

width適用したオブジェクトにを指定すると、オブジェクトはそのmargin: 0 auto親コンテナ内の中央に配置されます。

auto2番目のパラメーターとして指定すると、基本的に、ブラウザーに左右のマージン自体を自動的に決定するように指示します。これは、マージンを等しく設定することで行います。左マージンと右マージンが同じサイズに設定されることが保証されます。最初のパラメーター0は、上部マージンと下部マージンの両方が0に設定されることを示します。

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

したがって、例を示すと、親が100pxで子が50pxの場合、autoプロパティはとの間margin-leftで共有する50pxの空き容量があると判断しますmargin-right。

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

それは与えるでしょう：

margin-left:25;
margin-right:25;

このjsFiddleを見てください。親の幅を指定する必要はなく、子オブジェクトの幅のみを指定します。

auto：ブラウザがマージンを設定します。この結果はブラウザに依存します

margin：0 autoを指定します

* top and bottom margins are 0
* right and left margins are auto

通常のフローでのブロックレベルの置換されていない要素の幅とマージンの計算に関するCSS仕様から：

'margin-left'と 'margin-right'の両方が 'auto'の場合、それらの使用値は同じです。これは、要素を含むブロックのエッジに対して要素を水平方向に中央揃えにします。

margin:0 auto;

0上下とauto左右用です。つまり、要素の幅とコンテナーの幅に応じて、左右のマージンが自動マージンになります。

一般に、要素を中央に配置したい場合は、margin:auto完全に機能します。しかし、それはブロック要素でのみ機能します。

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0は上下、autoは左右です。ブラウザーがマージンを設定します。

2つの値がどのように機能するかについてのいくつかの説明で、それはより明確になります。

marginプロパティは以下の略記です。

margin-top
margin-right
margin-bottom
margin-left

では、どうして2つの値しかないのでしょうか。

まあ、あなたはこのように4つの値でマージンを表すことができます：

margin: 10px, 20px, 15px, 5px;

これは、上部10px、右20px、下部15px、左5pxを意味します

同様に、次のような2つの値で表すこともできます。

margin: 20px 10px;

これにより、上下に20px、左右に10pxのマージンができます。

そして、あなたが設定した場合：

margin: 20px auto;

次に、20pxの上下のマージンとautoの左右のマージンを意味します。autoは、コンテナに基づいて左/右マージンが自動的に設定されることを意味します。要素がブロックタイプの要素である場合、つまりボックスであり、ビューの幅全体を占める場合、autoは左右のマージンを同じに設定するため、要素は中央に配置されます。

「中央」タグの代わりに使用するのは、壊れている/非常に困難です。壊れたテーブルが必要な場合や、ブロックやテキストの中央揃えが機能しない場合に便利です。