如何在 flexbox 中居中對齊

Flexbox 已經成為我喜歡的元素居中方式。

你只需要將一個元素包裹在 div 中，並設置 display: flex 和 justify-content: center。

1
2
3

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

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

使用 Tailwind CSS 更加簡單，只需要添加 flex 和 justify-center 類名：

1
2
3

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

tags: [“flexbox”, “center alignment”, “Tailwind CSS”]