boxの幅がコンテンツのサイズに応じて決まるようにしつつ、ウィンドウの左右中央揃えにしたいです。

boxの幅がコンテンツのサイズに応じて決まるようにしつつ、ウィンドウの左右中央揃えにしたいです。

今、下のピンクの四角はそれぞれh3要素です。

h3{margin: 20px auto;}

で中央揃えにしています。

h3{display: inline-block;}

とすると、中の文字に応じてh3の幅が決まりますが、
横並びになってセンターに来なくなってしまいます。

親要素に

text-align: center;

を指定して、

<br>

で改行すれば一応なおるのですが、もっとシンプルな方法はないですか？