网格容器中的居中元素

Question

我想在具有显示网格的容器的正中心对齐一些元素。尽管在该元素的正中心存在网格间隙。

所以我想将我的元素（带有箭头的两个按钮）对齐在最中心（那里有 7）。

我知道它与绝对位置一起工作得很好，但我真的想避免它，因为我使用带有过渡的 svelte 并使用绝对位置更改元素位置。

这是我的页面和网格布局的图像：

这是它的代码：

.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;
}

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

Answer 1

一种方法是让两个链接跨越第 6 列和第 7 列 (

grid-column: 6 / span 2

)。您可以通过指定

grid-row:1

和

grid-row:-1

来保证它们位于顶行和底行。

.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;
  padding: 50px;
  outline: 1px solid red;
}

.nav-link {
  grid-column: 6 / span 2;
  align-self: start;
  justify-self: center;
}

.nav-link.about {
  grid-row: 1;
}

.nav-link.work {
  grid-row: -1;
  align-self: end;
}

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