頭揃えでセンタリングするCSS指定

文字やコンテンツをセンタリングで並べた際に、2段目に落ちたコンテンツを1段目の頭に揃える方法です。

以下のようにtext-align:center;でセンタリングを行うと要素の幅によっては中途半端なところで改行が入ってセンターによってしまいます。例えば、こんな感じ
に。

p {
  text-align: center;
}

これを解決するにはdisplay:tableとmarginによるセンタリングを使います。

p {
  display: table;
  margin: 0 auto;
}

するとなんということでしょう。改行が入っても
ちゃんと左から始まるではあり
ませんか。