Header 不是 100% 居中

Question

我的问题是，不知何故，我的 header，或者更具体地说，带有 class test 的元素不是 100% 居中，而是 header-image是。我已经用js检查了左边的位置和宽度。

        const element = document.querySelector(".header-image");

        const observer = new IntersectionObserver(
            ([e]) => 
                headerSticky(e),
            { threshold: [1] }
        );
        observer.observe(element);

        function headerSticky(element) {
            element.target.classList.toggle("is-sticky", element.intersectionRatio < 1);
            document.querySelector(".header").classList.toggle("image-is-sticky", element.intersectionRatio < 1);
        }

    * {
        padding: 0;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
    }
    
    :root {
        
    }
    
    body, html {
        height: 200vh;
        width: 100%;
    }
    
    .header-image {
        position: sticky;
        top: -1px;
        left: 50%;
        transform: translate(-50%, 0);
        margin-top: 15%;
        height: 350px;
        aspect-ratio: 1/1;
        background: red;
        z-index: 1001;
        transition: .5s;
    }
        .header-image.is-sticky {
            height: 80px;
        }
    
    .header {
        position: fixed;
        display: flex;
        justify-content: center;
        top: 0;
        width: 100%;
        height: 80px;
        background: hsla(0, 0%, 0%, .3);
        z-index: 1000;
        color: white;
    }
    nav {
        display: flex;
        align-items: center;
        height: 100%;
        background: yellow;
        gap: 0;
        transition: .2s;
    }
        .image-is-sticky nav {
            /* gap: 80px; */
        }
    .nav-menu {
        height: 100%;
        display: flex;
        align-items: center;
        background: blue;
    }
    .nav-link {
        color: black;
        margin: 0 1rem;
        background: lime;
    }

<div class="header-image"></div>

    <header class="header">
      <nav>
        <ul class="nav-menu">
          <a class="nav-link">Home</a>
          <a class="nav-link">News</a>
          <a class="nav-link">Saison</a>
        </ul>
        <div class="test" style="height: 80px; aspect-ratio: 1/1; background: cyan;">
        </div>
        <ul class="nav-menu">
          <a class="nav-link">Tickets</a>
          <a class="nav-link">Team</a>
          <a class="nav-link">Kontakt</a>
        </ul>
      </nav>
    </header>

Answer 1

我发现了问题。问题是菜单的宽度不同。所以我刚在 .nav-link 上放了一个最小宽度

.nav-link {
    display: flex;
    justify-content: center;
    color: black;
    margin: 0 1rem;
    background: lime;

    /* new */
    min-width: 75px;
}

但是你也可以修复它，当你通过 flexbox 以某种方式为每个 child.

设置相同的宽度时

Header 不是 100% 居中

Header not 100% centered

html

css

header

center