如何在React中使用TailwindCSS居中登录框内的Logo图片

核心调整思路 #

要让Logo在登录框内居中，需从水平居中和垂直居中两个维度入手，结合Tailwind的布局类快速实现：

1. 仅实现水平居中 #

直接给img元素添加mx-auto类，该类会自动设置左右外边距为auto，实现横向居中：

<img className="object-cover h-20 w-35 mx-auto" src="/sampa.png" alt='logo'/>

2. 实现水平+垂直完全居中 #

如果需要Logo在登录框内完全居中，需先给登录框的父容器配置flex布局：

• 父容器添加flex flex-col items-center justify-center h-full（h-full需根据登录框实际高度调整，也可替换为具体数值如h-[400px]）
• 子元素img保持原有尺寸类即可，父容器的items-center会自动实现水平居中

示例代码：

<!-- 登录框父容器 -->
<div className="flex flex-col items-center justify-center h-full p-4">
  <img className="object-cover h-20 w-35" src="/sampa.png" alt='logo'/>
  <!-- 其他登录表单元素 -->
</div>

补充说明 #

• 若你的登录框父容器已使用flex布局，只需确保items-center（水平居中）和justify-center（垂直居中）两个类存在即可
• 注意w-35属于自定义宽度类，若Tailwind默认未包含该尺寸，需在tailwind.config.js中添加自定义配置：

module.exports = {
  theme: {
    extend: {
      width: {
        '35': '8.75rem',
      },
    },
  },
}

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