如何在TailwindCSS中居中按钮？React+Next.js场景问题求助

你的代码里有几个导致按钮无法居中的问题，调整后就能实现预期效果：

1. 修复按钮容器的flex属性
   包裹按钮的div只加了justify-center和items-center，但没有设置flex（即display:flex），这两个属性只有在flex容器上才会生效。同时去掉h-screen，外层容器已经设置了全屏高度，子元素重复设置会打乱布局。

2. 调整外层flex的排列方向（可选）
   外层默认是横向flex，如果你想让logo和按钮垂直居中在屏幕中间，把外层的flex方向改成flex-col，元素会垂直排列，整体布局更合理。

3. 修正Next.js Image组件的使用（可选）
   你导入了Next.js的Image组件但没使用，换成官方组件能优化图片加载，需要设置width和height或者使用fill属性。

调整后的代码：

import React from "react";
import Head from "next/head";
import { signIn } from "next-auth/react";
import Image from "next/image";

const Login = ({ providers }) => {
  return (
    <div className="flex flex-col justify-center items-center h-screen">
      <div className="container max-w-l mx-auto mb-8">
        <Image 
          src="/logo.png" 
          alt="image description"
          width={200} // 根据实际需求设置尺寸
          height={200}
        />
      </div>
      
      <div className="flex justify-center items-center">
        {Object.values(providers).map((provider) => (
          <div key={provider.name}>
            <button
              className="bg-[#18D860] text-white px-12 py-2 text-lg tracking-widest uppercase rounded-full focus:outline-none hover:bg-opacity-80"
              onClick={() => signIn(provider.id, { callbackUrl: "/posts/dashboard" })}
            >
              Login with {provider.name}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Login;

关键调整点：

• 外层div添加flex-col，让元素垂直排列
• 按钮容器添加flex，移除flex-auto和h-screen
• 给logo容器加mb-8，和按钮拉开间距
• 按钮class里去掉重复的p-5和bg-primary，避免样式冲突

这样调整后，按钮就会和logo一起垂直居中在屏幕正中间了。

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