【Bootstrap4】 水平方向 中央寄せ

水平方向　中央寄せ　mx-auto　

１枚のカードを画面中央（水平方向中央）に配置したい。
[mx-auto]で中央に配置することができるが、この場合はどこに入れるのが正解か。

qiita.html

<div class="container">　←①
 <div class="row">　←②
  <div class="col-8">　←③
　 <div class="card">　←④
　　 ~カードの中身（省略）~
　 </div>
  </div>
 </div>
</div>

正解は、③番！
「このコンテナの中身を真ん中にしたい。」と考えると①番のコンテナにmx-autoを入れたくなるけど、それでは中央に寄ってくれません。

「何を真ん中に寄せるのか」を指定するイメージでmx-autoを入れます。
今回は、コンテナの中にある、「col-8サイズのカード」を真ん中に寄せたいので、③に入れると思った通りの構成になります。

毎回入れる場所に迷うのでまとめてみました。
水平方向の中央寄せはしょっちゅう使うので暗記しちゃいたいですね。