CSS 网格未在 Y 轴上对齐

Question

It's a small problem but I don't get it. I am just trying to align the text in y-axis, but it only goes a little distance down when I put align-self : end or center. Container is the main grid, which contains the col div (columns) which has the con div (content) which contains the text inside the 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;
}

here is the codepen link : https://codepen.io/aronnora/project/editor/DkyrVM

Answer 1

You would probably need to put the content inside its own container and then give it some properties of its own

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

or a simpler way to just add a padding-top: 40%; to your existing content

Answer 2

Welcome to StackOverflow.

So I went through your CSS. I inspected the elements and found out that the child element with class .con have the default height and is also not inheriting the parent's height because you haven't set height to parent which is not necessary since you are using the grid-template-rows: 48em .

So I would suggest you to set height of .con for eg.

.con {
  height: 48em;
}

I hope this solves your query.