最良のソリューションは、ユーザーベースで使用されているブラウザ、同じコードベースで働く他の人が持つ知識などの要因に依存します。

フレックスボックスモデルは、10より前のインターネットエクスプローラーのバージョンでも、12.1より前のオペラのバージョンでもまったくサポートされていません。Internet Explorerのすべてのバージョン、およびFirefox、Chrome、およびSafariの古いバージョンでは不完全にサポートされています。ただし、Firefox、Chrome、Edge、Safariなどの人気ブラウザの最近のバージョンはすべて、それを完全にサポートしています。今日のインターネットユーザーの大多数は、フレックスボックスをサポートするブラウザを使用しています。フレックスボックスモデルを使用することにした場合は、「justify-content：center」プロパティを設定し、フレックスボックスに「ディスプレイ：フレックス」プロパティが水平に中央にあることを確認します。垂直に中央に集中するには、正当なコンテンツの代わりに「Align-Items：Center」を使用します。

一方、マージンを使用してセンタリングは非常に広くサポートされており、より多くのWeb開発者がこのテクニックに精通しているため、他の人が維持できるようになります。
The best solution will depend on factors such as the browsers in use by your user base, the knowledge any other people working on the same code base may have.

The flex box model is not supported at all in versions of Internet Explorer prior to 10, nor in versions of Opera prior to 12.1. It is incompletely supported in all versions of Internet Explorer, and in old versions of Firefox, Chrome, and Safari. However, all recent versions of popular browsers like Firefox, Chrome, Edge and Safari support it fully. The vast majority of Internet users today are using browsers which support the flex box. If you decide to use the flex box model, set the "justify-content: center" property, as well as ensuring your flex box has the "display: flex" property, to centre horizontally. To centre vertically, use "align-items: center" instead of justify-content.

On the other hand, centering by using margin is very widely supported, and more web developers are familiar with the technique, which could make your HTML easier for others to maintain.