如何在页面中水平垂直居中ul列表内的导航元素？

你的问题在于Flex布局只应用在了<a>标签上，而没有给父级的导航容器和列表设置正确的Flex属性，同时浏览器默认的列表样式也会干扰布局。以下是修正后的完整代码和关键说明：

修正后的CSS代码 #

.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: white;
    overflow: hidden;
    /* 让nav内部的ul在全屏容器中垂直+水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu {
    /* 重置ul默认的内外边距和列表样式 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 让列表项li水平排列 */
    display: flex;
    /* 可选：控制导航项之间的间距，根据需求调整 */
    gap: 15px;
}

.menu li {
    /* 让li作为flex容器，确保内部a标签能正确对齐 */
    display: flex;
}

.menu a{
    padding: 15px 30px;
    color: black;
    text-align: center;
    /* 确保a标签内部文字垂直水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 可选：移除默认下划线，优化视觉效果 */
    text-decoration: none;
}

/* 可选：添加hover交互效果 */
.menu a:hover {
    background-color: #f5f5f5;
    border-radius: 6px;
}

关键修改点 #

• 给.nav添加Flex布局：利用align-items: center和justify-content: center让内部的<ul>在全屏固定容器中实现垂直+水平居中。
• 重置<ul class="menu">的默认样式：去掉浏览器自带的margin、padding和list-style，避免布局偏移。
• 给.menu设置Flex布局：让列表项<li>从默认的垂直排列改为水平排列，同时用gap控制项与项之间的间距。
• 简化<a>标签的样式：移除无效的left: 0、margin: 0 auto属性，保留必要的内边距和文字居中设置。

对应的HTML代码（无需修改） #

<nav class="nav">
    <ul class="menu">
        <li><a href="#">Google Store</a></li>
        <li><a href="#">Google Search</a></li>
        <li><a href="#">Spotify</a></li>
        <li><a href="#">Spotify Blog</a></li>
        <li><a href="#">Squarespace</a></li>
        <li><a href="#">Other work</a></li>
    </ul>
</nav>

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