如何使用Tailwind CSS正确实现div元素的水平垂直居中

异常原因 #

直接给卡片元素本身添加flex布局属性会导致显示异常：flex居中规则需要作用在待居中元素的父容器上，才能控制子元素的居中位置；如果直接给卡片加flex属性，会改变卡片内部子元素的默认排列逻辑，触发布局错乱。

修正方案 #

• 新增一层包裹卡片的父容器，给父容器设置占满视口高度、flex布局、双向居中的属性
• 保留卡片内部原有布局逻辑，移除卡片上原本用来撑上下间距的my-10类，避免破坏居中效果
• 补充移动端适配属性，防止小屏下卡片贴边
• 修正原代码里Tailwind类名笔误：颜色过渡的正确类名为transition-colors

完整修正代码 #

export default function Home() {
  return (
    // 外层居中容器
    <div className="min-h-screen flex items-center justify-center px-4">
      <div className="bg-white max-w-lg w-full mx-auto p-8 md:p-12 rounded-lg shadow-2xl">
        <div>
          <h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
        </div>
        <div className="mt-5">
          <button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-colors">Admin</button>
        </div>
        <div className="mt-5">
          <button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-colors">Client</button>
        </div>
      </div>
    </div>
  )
}

关键属性说明 #

• min-h-screen：让外层容器高度匹配浏览器视口高度，为垂直居中提供有效布局空间
• flex items-center justify-center：为父容器开启flex布局，其中items-center控制子元素垂直居中，justify-center控制子元素水平居中
• px-4 + 卡片上的w-full：小屏设备下自动给卡片预留左右边距，避免内容贴边

内容的提问来源于stack exchange，提问作者AndreiSergiuu