如何让设置position:absolute的MEGA MENU相对于导航栏动态居中？

纯CSS实现方案（优先推荐，无需额外脚本逻辑） #

核心原理：打破Bootstrap下拉菜单默认相对于单个导航项定位的规则，将定位上下文改为页面/导航容器，再通过CSS偏移属性实现全局居中。
修改后的CSS代码如下：

/* 覆盖Bootstrap默认配置，取消导航项的相对定位，让下拉菜单不绑定单个导航项的位置 */
.nav-item.dropdown {
  position: static;
}

.dropdown-menu {
  position: absolute;
  width: 400px;
  height: 300px;
  /* 居中核心配置 */
  left: 50% !important; /* 覆盖Bootstrap自动计算的left值 */
  transform: translateX(-50%);
  right: auto !important; /* 禁用Bootstrap默认的right定位规则 */
}

.nav-item {
  margin-left: 60px;
}

.list-1 {
  position: absolute;
  left: 0px;
}

.list-2 {
  position: absolute;
  left: 100px;
}

.list-3 {
  position: absolute;
  left: 200px;
}

如果你的导航栏包裹在固定宽度的公共容器内，希望超级菜单相对于容器居中而非整个浏览器视口，只需给外层公共容器添加position: relative属性即可。

动态JS方案（适配菜单宽度不固定的场景） #

如果超级菜单的宽度是动态生成的，无法提前指定固定值，可以通过监听Bootstrap下拉菜单的显示事件动态计算居中偏移量，代码如下：

// 监听下拉菜单显示事件，动态计算位置
$('.dropdown').on('show.bs.dropdown', function () {
  const $menu = $(this).find('.dropdown-menu');
  const menuWidth = $menu.outerWidth();
  const viewportWidth = $(window).width();
  const leftOffset = (viewportWidth - menuWidth) / 2;
  $menu.css({
    left: leftOffset,
    transform: 'none'
  });
})

// 窗口尺寸变化时重新计算已展开菜单的位置
$(window).on('resize', function () {
  const $activeMenu = $('.dropdown-menu.show');
  if ($activeMenu.length) {
    $activeMenu.trigger('show.bs.dropdown');
  }
})

使用该方案时可以移除CSS方案中设置的left、transform相关配置，完全由脚本控制位置。

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