JavaScript - margin:auto auto を上下左右に揃えることができないのはなぜですか?

Question

HTML には p が 1 つだけあります。

リーリー

css1 は p.test を左右に中央に配置できます。

css2:

リーリー

Answer 1

他のプロパティの使用値の間には次の制約が適用される必要があります:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 含まれるブロックの幅

「margin-left」と「margin-right」の両方が「auto」の場合、使用される値は同じです。これにより、要素が含まれるブロックの端に対して水平方向に中央揃えになります。

次は高さに関するものです：

「margin-top」または「margin-bottom」が「auto」の場合、使用される値は 0 です。「height」が「auto」の場合、高さは要素にブロックレベルの子があるかどうか、および要素にブロックレベルの子があるかどうかによって異なります。パディングまたはボーダーがあります:

規定はこのように定められた計算法であるため、これはブラウザによって実現されます。

• CSS规范

Answer 2

これは良い質問です。連続する 2 つの要素がある場合、それらを左右に中央に配置できますか?同様に、上下に要素がある場合、対応する要素が存在する位置をブラウザにどのように計算させたいでしょうか?

Answer 3

いいえ、上下の配置にフレックス レイアウトを使用しない場合、良い方法はありません。 virtical–align も使いにくいです。

Answer 4

いいえ、上下左右を中央揃えしたい場合は、フレックス レイアウトを使用し、その後テーブル、テーブルセル、または位置決めを使用することをお勧めします