CSS Grid布局问题：元素未居底居中却靠左显示

问题分析 #

1. 选择器错误：你用了.body类选择器，但HTML中是原生<body>标签，应该使用body标签选择器，否则Grid布局不会生效在body上。
2. 箭头元素未纳入Grid布局：#the_down_arrow没有设置Grid位置属性，默认自动排列但未按预期定位；同时#scrolllabel的对齐属性重复且不符合“居底”需求（align-self: center是垂直居中，不是居底）。
3. 对齐属性冗余：place-self: center已经包含垂直和水平居中的设置，重复写align-self: center毫无意义，且你需要垂直方向居底，应替换为end值。

修正后的代码 #

CSS部分 #

body {
  margin: 0;
  background-color: rgb(255, 237, 237);
  display: grid;
  grid-template-rows: 10vh 48vh 21vh 21vh;
  grid-template-columns: 98vi;
  color: white;
}

#scrolllabel {
  color: rgb(19, 1, 1);
  grid-row: 3;
  grid-column: 1;
  z-index: 100;
  font-family: Arial;
  /* 垂直居底，水平居中 */
  place-self: end center;
  font-size: 25px;
  border-width: 0;
  margin: 0; /* 移除h2默认margin避免位置偏移 */
}

#the_down_arrow {
  color: rgb(19, 1, 1);
  grid-row: 3;
  grid-column: 1;
  z-index: 100;
  font-size: 30px;
  place-self: end center;
  margin-bottom: 10px; /* 调整箭头与底部的间距 */
}

HTML部分 #

<h2 id="scrolllabel">Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>

推荐优化方案 #

如果希望文字和箭头作为整体居底居中，更建议将它们放入同一个容器，减少Grid项的管理成本：

优化后代码 #

body {
  margin: 0;
  background-color: rgb(255, 237, 237);
  display: grid;
  grid-template-rows: 10vh 48vh 21vh 21vh;
  grid-template-columns: 98vi;
  color: white;
}

.scroll-container {
  grid-row: 3;
  grid-column: 1;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* 容器内部元素居底 */
  padding-bottom: 10px; /* 调整整体与底部的间距 */
}

#scrolllabel {
  color: rgb(19, 1, 1);
  font-family: Arial;
  font-size: 25px;
  border-width: 0;
  margin: 0 0 5px 0;
}

#the_down_arrow {
  color: rgb(19, 1, 1);
  font-size: 30px;
}

<div class="scroll-container">
  <h2 id="scrolllabel">Scroll down to know more</h2>
  <b id="the_down_arrow">&darr;</b>
</div>

内容的提问来源于stack exchange，提问作者Harshit singh