垂直对齐网格容器

Question

我设法为我的简单布局获得了网格。现在我想将它垂直居中。我怎样才能完成它？重要提示：我的意思是整个包装器（包装容器/整个网格），而不是容器内的项目......

关于这个问题的第二个问题是：这会影响“grid-auto-flow: row dense;”吗？

html {box-sizing: border-box;}


body {}



.wrapper {
  display: grid;
  width: 100%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-columns: 20% 20% 20%;
  grid-template-rows: 25% 25% 25%;
  justify-content: center;
  align-content: center;
  grid-auto-flow: row dense;
  }


.box
   {padding: 15px;
    border: 1px solid red;
    background: grey;}



.a {grid-column: 1 / span 2;
    grid-row: 1 / span 2;}

.b {grid-column: 3; grid-row: 1}

.c {grid-column: 3; grid-row: 2;}

.d {grid-column: 1; grid-row: 3}

.e {grid-column: 2; grid-row: 3}

.f {grid-column: 3; grid-row: 3}

<div class="wrapper">

<div class="box a">
<img src="" style="">
</div>

<div class="box b">
<img src="" style="">
</div>

<div class="box c">
<img src="" style="">
</div>

<div class="box d">
<img src="" style="">
</div>

<div class="box e">
<img src="" style="">
</div>

<div class="box f">
<img src="" style="">
</div>

Answer 1

我假设您已经知道如何在 CSS 网格中垂直居中项目。

您现在可以做的是创建另一个 wrapper-of-wrapper div，其布局是 flexbox（垂直）或网格（只有 1 行和 1 列），然后将您的 wrapper 放入其中。

html {box-sizing: border-box;}

.wrapper-of-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.wrapper {
   
    height: 80%;

    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: 20% 20% 20%;
    grid-template-rows: 25% 25% 25%;
    justify-content: center;
    align-content: center;
    grid-auto-flow: row dense;
}

.box {
    padding: 15px;
    border: 1px solid red;
    background: grey;
}

.a {grid-column: 1 / span 2;
    grid-row: 1 / span 2;}

.b {grid-column: 3; grid-row: 1}

.c {grid-column: 3; grid-row: 2;}

.d {grid-column: 1; grid-row: 3}

.e {grid-column: 2; grid-row: 3}

.f {grid-column: 3; grid-row: 3}

<div class="wrapper-of-wrapper">
    <div class="wrapper">

        <div class="box a">
            <img src="" style="">
        </div>

        <div class="box b">
            <img src="" style="">
        </div>

        <div class="box c">
            <img src="" style="">
        </div>

        <div class="box d">
            <img src="" style="">
        </div>

        <div class="box e">
            <img src="" style="">
        </div>

        <div class="box f">
            <img src="" style="">
        </div>
    </div>
</div>

如果您只想让包装器在 flexbox 中居中但不随其调整大小，请将其高度设置为 auto 并将 flex 设置为 0 0 auto 以便它根据内容调整大小，并且不会缩小或增长。