Help us understand the problem. What is going on with this article?

Bootstrap 4でブロック中央寄せ

More than 3 years have passed since last update.

環境

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

結論

先に結論です。

<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には、marginsautoに設定して固定幅ブロックレベルのコンテンツを水平方向に中央寄せにする.mx-autoクラスも含まれています。

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

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

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

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

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

参考資料
Utilities Spacing

Fendo181
Enduです。PHPとJavaScriptを書いてご飯食べてます。
https://scrapbox.io/fendo181/profile
pepabo
「いるだけで成長できる環境」を標榜し、エンジニアが楽しく開発できるWebサービス企業を目指しています。
https://pepabo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away