Tailwind 常用CSS

一、居中

<div className="flex justify-center items-center mb-6">
    <Image src="/logo.png" width={64} height={64} />
    <span className="text-2xl font-bold ml-4">用户登录</span>
</div>

1. flex: 这个类将一个元素的布局模式设置为 Flexbox。使用 Flexbox 可以更方便地控制子元素的排列和对齐。

2. justify-center: 这个类用于在主轴（默认是水平方向）上将子元素居中对齐。具体来说，它会把子元素在容器中水平居中。

3. items-center: 这个类用于在交叉轴（默认是垂直方向）上将子元素居中对齐。使用这个类可以让子元素在容器中垂直居中。

对应css:

display: flex;
justify-content: center;
align-items: center;