CSS列表菜单无法在div中居中的技术问题求助

嘿，我来帮你搞定这个菜单居中的麻烦！你的核心问题出在浮动元素的布局逻辑和父容器的文本对齐设置不匹配上，导致居中失效，调整div宽度后又触发了Safari的兼容性问题。咱们一步步来修复：

问题根源分析 #

你原来的#primary_nav_wrap ul设置了float: left，这会让整个ul脱离文档流，父容器#primary_nav_wrap无法正确识别它的宽度，同时text-align: center对浮动元素完全不起作用——这就是你设置margin: 0 auto没效果的原因。后来调整div宽度，又因为Safari对inline元素的空格处理、盒模型计算和其他浏览器有细微差异，导致显示异常。

修复方案（两种可选，推荐第一种） #

方案1：使用Flex布局（现代浏览器友好，Safari兼容良好） #

Flex布局是目前最可靠的居中方式，能完美解决跨浏览器兼容性问题。修改以下CSS：

#primary_nav_wrap {
  display: block;
  /* 不需要额外设置宽度，让容器自适应内容 */
}

#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  /* 核心：用flex实现水平居中 */
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 可选：小屏幕下菜单项自动换行 */
  /* 移除原来的float: left和text-align: center */
}

#primary_nav_wrap ul li {
  position: relative;
  padding: 0;
  /* 移除原来的float: left，flex布局下自动排列 */
}

方案2：使用Inline-block+父容器文本对齐（兼容旧浏览器） #

如果需要兼容非常老的浏览器，可以用这种方式：

#primary_nav_wrap {
  display: block;
  text-align: center; /* 让内部inline-block元素居中 */
}

#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  display: inline-block; /* 让ul成为行内块元素，继承父容器的text-align */
  /* 移除原来的float: left和text-align: center */
}

#primary_nav_wrap ul li {
  position: relative;
  padding: 0;
  display: inline-block; /* 让li横向排列 */
  /* 移除原来的float: left */
}

子菜单兼容性说明 #

你原来的子菜单（ul ul）定位逻辑是对的：left: 50% + margin-left: -100px 实现了子菜单相对于父li居中，这个部分不需要修改，两种方案都能完美兼容。

为什么这能解决Safari的问题？ #

不管用Flex还是Inline-block方案，都避免了手动设置父容器宽度，而是让容器自适应内容宽度，同时消除了浮动带来的文档流脱离问题。Safari对Flex布局的支持非常完善（从Safari 9开始就完全支持），Inline-block方案也能通过统一的盒模型计算避免显示异常。

现在把修改后的CSS替换掉原来的代码，菜单就能在所有浏览器中完美居中啦！

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