CSS 网格未在 Y 轴上对齐

Question

这是一个小问题，但我不明白。我只是想在 y 轴上对齐文本，但是当我放置 align-self 时它只会向下移动一点距离：结束或中心。容器是主网格，其中包含 col div（列），其中 con div（内容）包含 box 内的文本div

CSS

.container{

  display: grid;
  grid-template-columns: repeat(4,22.45em);
  grid-template-rows: 48rem;
  grid-template-areas:
  "colone coltwo colthr colfour";
  /*text-align: center;*/

}
.con{
  /*
  padding-left: 0.5rem auto;
  padding-right: 0.5rem auto;
  padding-top: 0.5rem auto;
  padding-bottom: 0.5rem auto;*/
  display: grid;
  grid-area: con;

  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  position: relative;
}
.col{
  border-right: 0.005rem solid white;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 16rem;
  grid-template-areas: "con";
  color: grey;
  z-index: 1;
}
.box{
  position: absolute;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  justify-self: start;
  align-self: end;
}

这里是 codepen 链接：https://codepen.io/aronnora/project/editor/DkyrVM

Answer 1

您可能需要将内容放在它自己的容器中，然后给它自己的一些属性

.center-Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

或者一种更简单的方法，只需将padding-top: 40%; 添加到您现有的内容中

Answer 2

欢迎来到 StackOverflow。

所以我浏览了你的 CSS。我检查了元素，发现类.con 的子元素具有默认高度，并且也没有继承父元素的高度，因为您没有将高度设置为父元素，因为您使用的是grid-template-rows: 48em，所以这不是必需的。

所以我建议你将高度设置为.con 例如。

.con {
  height: 48em;
}

我希望这能解决您的问题。