如何在左对齐文本所在行中居中UL/LI菜单？

要让菜单列表在菜单栏中真正水平居中（不受站点名称宽度影响），同时保持站点名称左对齐，只需调整CSS布局逻辑，利用绝对定位实现列表的全局居中，具体修改如下：

修改后的CSS代码 #

.menubar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  position: fixed;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
  /* 添加相对定位，作为绝对定位元素的参考容器 */
  position: relative;
}

.logo {
  /* 移除固定宽度和float，让logo仅占据自身内容宽度，保持左对齐 */
  margin-left: 20px;
  font-size: 24px;
}

.ul {
  font-size: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 绝对定位实现全局居中 */
  position: absolute;
  left: 50%;
  /* 向左偏移自身宽度的50%，实现真正居中 */
  transform: translateX(-50%);
}

.ul li {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
}

关键修改说明 #

• 移除.logo的width: 33.33%和float: left：让站点名称仅占用自身内容宽度，避免占用固定比例空间干扰菜单居中逻辑。
• 给.menubar添加position: relative：将菜单栏设为绝对定位元素的参考容器，确保菜单列表相对于整个菜单栏范围定位。
• 给.ul设置position: absolute + left: 50% + transform: translateX(-50%)：这是实现元素不受其他元素影响的真正水平居中的经典方案，无论浏览器窗口缩放、站点名称宽度变化，菜单列表始终保持在菜单栏的水平中点位置。

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