Bootstrap 4でブロック中央寄せ #Bootstrap

環境

開発環境	バージョン
ブラウザ	Chrome( 55.0.2883.87 m (64-bit))
Bootstrap	4 Alpha 5

結論

先に結論です。

.html

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

これで実装できます

Horizontal centering

きっかけ

Bootstrapを使った中央寄せを実装しようとして、調べるとBootstrap3時の実装方法である以下のコードが沢山出て来ると思います。

<div class="center-block">
  <div>ブロックの中央よせ</div>
</div>

Bootstrapの使い方特設ページ - ブロック中央よせ -
中央揃え

しかし、Booystrap4では、.center-blockクラスは排除され新しく、.mx-autoクラスが実装されるようになります。

公式ドキュメントを確認すると

Dropped .center-block for the new .mx-auto class.

と書かれている通りに、今後Bootstrap4でブロック中央寄せを実装する際には.center-blockではなく.mx-autoで記述します。

.mx-autoクラスとは?

公式では以下の様に説明しています。

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content by setting the horizontal margins to auto.

さらに、Bootstrapには、marginsをautoに設定して固定幅ブロックレベルのコンテンツを水平方向に中央寄せにする.mx-autoクラスも含まれています。

という事なので、つまる所

.html

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

上のコードはCSSで記述すると

.css

.mx-auto {
  width: 200px;
  margin: 0 auto; 
}

を実装しているのだと考えられます。

参考資料
Utilities Spacing