More than 5 years have passed since last update.

widthが可変の要素を中央に配置する

Posted at 2016-07-29

テキスト等、可変長の要素を中央に配置する場合、
親要素にtext-align: center;、子要素にdisplay: inline-block;と指定する事で中央に配置出来ますが、
複数行のテキストの場合は上記では実現出来ません。

以下のようにdisplay: table;を使う事によって実現できます。

.block {
  display: table;
  margin: 0 auto;
}

親要素へのスタイル指定も不要なので便利です。