在css网格内垂直对齐

Question

我想有一个巨大的进度条， 它在css网格内垂直对齐。

问题是，css网格内的垂直对齐对我来说不起作用。 我试过Firefox，也试过Chrome。

我试过vertical-align: middle，没有工作。 我已经在网格项中放置了一个flexbox，但仍无效。

这是我的最小例子：

＆＃13;

＆＃13;

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.three {
  border-style: solid;
  border-color: violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}

＆＃13;

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
            <div class="progress-bar">
              <span style="width: 80%;">Progress: 80%</span>
            </div>
          </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>

＆＃13;

＆＃13;

＆＃13;

演示： https://codepen.io/anon/pen/OOpdPW

任何人都有任何想法，如何垂直对齐上述演示项目的进度条（在其网格项内）？

Answer 1

对于flex解决方案，您必须将display:flex和align-items: center添加到 .two ，以便CSS变为如下所示：

.two {
    border-style: solid;
    border-color: yellow;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    display: flex;
    align-items: center;
}

然后将flex: 1添加到 .vertical ：

.vertical {
    flex: 1
}

以下是完整代码：

＆＃13;

＆＃13;

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  /*width: 100vw; not needed*/
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  display: flex;
  align-items: center;
}

.vertical {
  flex: 1;
}

.three {
  border-style: solid;
  border-color: violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}

＆＃13;

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
        <div class="progress-bar">
          <span style="width: 80%;">Progress: 80%</span>
        </div>
      </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将display: grid和align-items: center添加到.two div，但如果使用align-self: center，您还可以使用.vertical div上的align-items: center避免在父级上使用1}}：

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  display: grid; /* added */
  align-items: center; /* added */
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4   ;
}

.three {
  border-style: solid;
  border-color: violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}

/* optional, without the usage of the align-items: center; on the .two div
.vertical {
  align-self: center;
}
*/

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
        <div class="progress-bar">
          <span style="width: 80%;">Progress: 80%</span>
        </div>
      </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>

Answer 3

给予进步额外的风格。 position absolute，top和transform：translate。 别忘了将position:relative添加到进度的父级

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  position:absolute;
  top: 50%;
  transform:translate(0, -50%);
  height: 2em;
}

Answer 4

你是否总是忘记如何使用CSS Grid对div中的元素进行垂直对齐？不要感到孤独，因为我也是这样，我总是在这里结束。基本上，这两个属性可以应用于包含需要垂直居中的元素的div：

.some-class {
  display: grid;
  align-items: center;
}

这是一个JSFiddle示例，适用于对这些属性如何工作感兴趣的人。

<强>资源

• grid-template
• justify items
• align items