如何用CSS Grid实现居中，避免小屏幕下登录框超出屏幕顶部

问题根源在于你给父容器设置了固定的height:100vh，当登录框整体高度超过视口高度时，grid布局的place-items:center会让内容在100vh高度的容器内居中，导致顶部内容溢出容器且无法滚动查看。

只需对#okta-signin-container的CSS做两处调整即可解决：

1. 将height:100vh改为min-height:100vh，确保容器在内容较小时占满视口高度，内容较多时自动扩展高度适配内容。
2. 添加overflow-y:auto，让容器在内容超出自身高度时显示垂直滚动条。

修改后的完整CSS代码：

#okta-signin-container{
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 25px;
  box-sizing: border-box;
  overflow-y: auto;
}

调整后，当屏幕高度充足时，登录框依然保持居中显示；当屏幕高度不足时，容器会自动适配内容高度，同时允许滚动查看完整的登录表单，不会再出现顶部内容被截断的情况。

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