如何在 CSS Grid 中垂直居中内容？答案

【问题标题】：How to vertically center content in CSS Grid?如何在 CSS Grid 中垂直居中内容？
【发布时间】：2019-08-08 01:41:42
【问题描述】：

我正在尝试将一侧的两个 div 与另一侧的较大 div 垂直对齐。

这是我想要实现的目标的模型：

左侧的两个较小的 div 占用了相当多的空间 - 看起来每个都占用了 50% 的高度。我知道我需要先收紧 div，使其只是实际 div 中内容量的高度，然后以某种方式水平对齐到较大的绿色 div。

我尝试使用 align-items、justify-content 和 grid-template-rows，但没有得到我想要的响应式输出。

h2,
p {
  font-size: 14px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.object {
  height: 400px;
  width: 500px;
  background: green;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'item1'
    'item2'
    'item3';
  background-color: orange;
}

.grid-container {
  display: grid;
  grid-template-areas: 
    'item2 item1' 
    'item3 item1';
  background-color: orange;
  border: 1px solid red;
}

.grid-container>div {
  border: 1px solid purple;
  background-color: orange;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

将网格项目变成弹性容器。

使用auto 边距将它们推入到位。

.grid-container > div {
  display: flex;             /* new */
  flex-direction: column;    /* new */
  border: 1px solid purple;
  background-color: orange;
}

.item2 {
  margin-top: auto;          /* new */
  grid-area: item2;
}

.item3 {
  margin-bottom: auto;       /* new */
  grid-area: item3;
}

h2,
p {
  font-size: 14px;
}

.item1 {
  grid-area: item1;
}

.object {
  height: 400px;
  width: 500px;
  background: green;

}

.grid-container {
  display: grid;
  grid-template-areas:
    'item1'
    'item2'
    'item3';
  background-color: orange;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'item2 item1'
    'item3 item1';
  background-color: orange;
  border: 1px solid red;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

【讨论】：

【解决方案2】：

h2,
p {
  font-size: 14px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
  align-self: self-end;
}

.item3 {
  grid-area: item3;
  align-self: self-start;
}

.object {
  height: 400px;
  width: 500px;
  background: green;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'item1'
    'item2'
    'item3';
  background-color: orange;
}

.grid-container {
  display: grid;
  grid-template-areas: 
    'item2 item1' 
    'item3 item1';
  background-color: orange;
  border: 1px solid red;
}

.grid-container>div {
  border: 1px solid purple;
  background-color: orange;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>
</body>
</html>

在要下拉的 div [.item2] 上使用 align-self: self-end/end，在要保持在顶部的 div [.item3] 上使用 align-self: self-start/start。作为参考，您可以通过此链接进行参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

【讨论】：