Tailwind+Next.js中items-center失效，导航栏元素Y轴无法对齐

你遇到的问题是添加了items-center但导航栏元素仍无法垂直居中，主要原因是浏览器默认样式干扰和flex容器未占满父元素高度，具体排查和解决方法如下：

问题原因分析 #

1. 浏览器默认样式：<h1>标签默认带有上下外边距（margin-block），<ul>标签默认带有上下外边距和左侧内边距，这些默认样式会破坏flex的垂直对齐效果。
2. flex容器高度未继承：外层<nav>设置了h-12，但内部的flex容器<div>没有设置h-full，导致items-center是基于div自身的高度（而非nav的高度）进行对齐，无法实现整体垂直居中。

解决方案 #

修改代码时需要做以下两处调整：

• 给内部flex容器添加h-full，让它占满nav的整个高度；
• 重置h1和ul的默认内外边距，消除浏览器样式干扰。

修改后的完整代码：

"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Navbar = () => {
    const pathname = usePathname();
  return (
    <nav className='min-h-10 h-12 bg-black px-24'>
        <div className='flex justify-around items-center h-full'>
            <h1 className='font-bold text-white text-2xl m-0'>Profile</h1>
            <ul className='flex justify-center items-center text-gray-400 gap-6 m-0 p-0'>
                <li>
                    <Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}>
                        Home
                    </Link>
                </li>
                <li>
                    <Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}>
                        More
                    </Link>
                </li>
            </ul>
        </div>
     
    </nav>
  )
}

export default Navbar;

关键修改说明 #

• div添加h-full：确保flex容器高度和nav一致，items-center的垂直对齐基准变为nav的高度；
• h1添加m-0：移除标题默认的上下外边距，避免元素被顶起；
• ul添加m-0 p-0：移除列表默认的内外边距，消除布局偏移。

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