オートボット

Flex コンテナのすべての端から要素を均等にプッシュするセンタリング手法。1 つのアイテムのみをすばやくセンタリングする場合に最適です。

この手法の詳細と効率的なケースについては、この記事の全文をご覧ください。

記事全文 · YouTube の動画 · GitHub 上のソース

HTML

<article class="autobot">
  <h1>Autobot</h1>
</article>

CSS


        .autobot {
  display: flex;
}

.autobot > * {
  margin: auto;
}