[解決済み】「margin: 0 auto;」を動作させるためには、具体的に何が必要ですか？

質問

を設定することは知っています。 margin: 0 auto; は、要素を中央揃え（左右）するために使用します。しかし、自動マージンが機能するためには、要素とその親が特定の条件を満たす必要があることは知っていますが、その魔法をうまく使うことができません。

そこで質問なのですが、ある要素とその親にどのようなCSSプロパティを設定すれば、その要素の margin: 0 auto; を使うと、その子が左右中央に配置されるのですか？

解決方法は？

思いつくままに

1. 要素はブロックレベルでなければならない、例えば display: block または display: table
2. 要素が浮遊してはならない
3. 要素が固定位置または絶対位置であってはならない。 ¹

他の人の頭の中から

1. この要素には、必ず width でない場合は auto ²

注意点 すべて これらの条件のうち、中央揃えされる要素が真でなければ動作しません。

¹ <サブ この例外は、固定または絶対位置の要素に left: 0; right: 0 , それ 意志 中央揃え、自動マージン .

² <サブ 技術的に margin: 0 auto は auto width と共に動作しますが、auto width が auto margin よりも優先され、結果として auto margin はゼロになり、あたかも "動作しない" のように見えます。