如何在Flexbox中對齊中心

Flexbox已成為我最喜歡的在頁面上居中放置元素的方法。

您將一個項目包裝在一個div，然後您設置display: flex和justify-content: center。

<div class="wrapper">
  ...
</div>

.wrapper {
  display: flex;
  justify-content: center;
}

使用Tailwind CSS更加容易，您所要做的就是添加flex和justify-center類：

<div class="flex justify-center">
   ...
</div>

免費下載我的CSS手冊

更多CSS教程：