如何在带Gap的Grid容器中居中元素（规避绝对定位）

我需要将两个带箭头的按钮精准对齐到设置了display: grid的容器正中心（即布局图中标注7的位置），但这个中心正好是grid gap所在的区域。我知道用position: absolute可以实现，但因为正在使用Svelte框架且涉及过渡效果，绝对定位会干扰元素位置，所以想避开这个方案。

原始代码 #

CSS #

.content-container {
    display: -ms-grid;
    display: grid;
    min-height: 0;
    min-width: 0;
    grid-auto-flow: dense;
    min-height: 100vh;
    min-width: 100vw;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 50px;
    //adding the padding to the container
    padding: 50px;
    background: blue;
}
.nav-link {
    align-self: start;
    justify-self: center;
}
.nav-link.work {
    align-self: end;
}

HTML #

<section class="content-container">
    <div class="nav-link about">
        btn
    </div>
    <div class="nav-link work">
        btn
    </div>
</section>

解决方案一：利用Grid网格线精准定位 #

直接通过Grid的行列定位，让两个按钮都落在中心交叉区域，分别上下对齐：

修改后的CSS：

.content-container {
    display: grid;
    min-height: 100vh;
    min-width: 100vw;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto 1fr; /* 把容器行分成三部分，中间行用来承载中心元素 */
    gap: 50px;
    padding: 50px;
    background: blue;
}

.nav-link {
    grid-column: 6 / 8; /* 12列布局的中心列范围 */
    grid-row: 2; /* 固定在中间行 */
    justify-self: center; /* 水平居中 */
}

.nav-link.about {
    align-self: flex-end; /* 第一个按钮靠中间行底部 */
}

.nav-link.work {
    align-self: flex-start; /* 第二个按钮靠中间行顶部 */
}

这种方式完全基于Grid布局实现，元素保持在文档流内，不会影响Svelte的过渡效果，精准度也能满足要求。

解决方案二：嵌套Flex容器 #

给两个按钮加个外层容器，让这个容器占据Grid的中心区域，内部用Flex垂直排列按钮：

修改后的HTML：

<section class="content-container">
    <div class="center-wrapper">
        <div class="nav-link about">btn</div>
        <div class="nav-link work">btn</div>
    </div>
</section>

修改后的CSS：

.content-container {
    display: grid;
    min-height: 100vh;
    min-width: 100vw;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 50px;
    padding: 50px;
    background: blue;
}

.center-wrapper {
    grid-column: 6 / 8; /* 定位到中心列 */
    grid-row: 1 / -1; /* 占据容器整个高度 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中容器内的按钮 */
    align-items: center; /* 水平居中 */
    gap: 50px; /* 和Grid的gap保持一致，保证位置精准 */
}

.nav-link {
    /* 移除原有的align-self等属性 */
}

外层容器固定在Grid中心，内部用Flex控制按钮位置，同样不涉及绝对定位，完美兼容Svelte的过渡逻辑。

内容的提问来源于stack exchange，提问作者Eli-ott