实现两行显示的UL菜单居中对齐

我懂你现在的头疼事儿——用ul/li结构做的移动端菜单，想让它在换行成两行的时候依然保持整体居中，但翻遍方法试了都没效果。咱们先拆解下你当前代码里的问题，再给你调整方案：

当前代码的核心问题 #

你给ul加了display: flex和justify-content: center，但没加flex-wrap: wrap，这就导致当屏幕宽度不够时，li元素会被强行挤压在一行里，而不是自动换行；另外ul设置了固定的width:90%，可能会限制居中的表现范围。

调整后的CSS方案 #

你只需要修改移动端媒体查询里的CSS，核心是给ul加上换行属性，再调整宽度和对齐方式：

@media only screen and (min-width: 300px) and (max-width: 480px) {
  .header-links-mobile {
    display: inline-block;
    width: 80%;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0; /* 配合margin:auto实现容器自身居中 */
    margin: 0 auto;
    text-align: center;
  }
  .header-links-mobile ul {
    width: 100%; /* 改成100%，让ul充分利用容器空间 */
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 关键：允许flex元素自动换行 */
    gap: 10px; /* 可选：给菜单项之间加间距，排版更美观 */
  }
  .header-links-mobile ul li {
    color: #fff;
    padding: 5px 8px;
    display: inline-flex; /* 保证菜单项内容自身居中 */
    text-align: center;
    white-space: nowrap; /* 可选：防止单个菜单项内容被拆成两行 */
  }
  .header-links-mobile ul li a {
    color: #fff;
  }
  .header-links-mobile ul li a:hover {
    color: #fff;
  }
}

关键调整说明 #

1. 给.header-links-mobile加right:0和margin:0 auto：确保菜单容器本身在页面里是水平居中的，而不是靠左偏移
2. ul添加flex-wrap: wrap：这是让菜单换行的核心属性，没有它flex元素会一直挤在一行无法换行
3. ul宽度改成100%：让ul能充分利用外层容器的宽度，保证换行后的每一行内容都能在容器范围内居中对齐
4. li用inline-flex+white-space: nowrap：保证每个菜单项的内容是完整一行，同时自身保持居中显示

你的HTML结构完全不用改，ul/li本身就是做菜单的经典合理方案，没必要更换其他结构~

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