如何让容器占用其他容器空间？注册文本居中布局问题咨询

核心问题分析 #

• .main容器的.main_container设置了height:80vh，占据屏幕80%高度，导致下方注册容器被挤到屏幕下半部分。
• CSS中grid-template-columns: ifr ifr是拼写错误，应为1fr 1fr，错误写法会导致网格布局失效，影响内容对齐。
• 注册容器的.main_container_register未设置垂直居中属性，仅靠align-items: top无法让内容居中。

修正步骤及代码 #

1. 调整登录容器高度，避免过度占用空间

修改.main和.main_container样式，减少不必要的高度占用：

/*Login Section*/
.main {
  background-color: #141414;
}

.main_container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 修正拼写错误：ifr → 1fr */
  align-items: center; /* 改为垂直居中，替代top */
  justify-self: center;
  text-align: left;
  min-height: 50vh; /* 降低高度，避免占满屏幕 */
  background-color: #141414;
  z-index: 1;
  width: 100%;
  max-width: 1200px; /* 增大最大宽度，避免内容过窄 */
  padding: 0 50px;
}

2. 修复注册容器布局，实现内容居中

修改.main_register和.main_container_register样式，确保内容垂直水平居中：

/* Register Headers*/
.main_register { 
  background-color: #141414; /* 统一背景色，原红色可按需调整 */
  min-height: 50vh; /* 分配剩余屏幕高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.main_container_register {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 修正拼写错误：ifr → 1fr */
  align-items: center; /* 垂直居中内容 */
  justify-items: center; /* 水平居中网格项 */
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 50px;
}

3. 优化注册文本字体大小，提升视觉效果

调整.main_content_register的标题字体大小，避免过小：

.main_content_register h1 {
  font-size: 2rem; /* 增大主标题字体 */
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-align: center;
}

.main_content_register h2 {
  font-size: 1.2rem; /* 增大副标题字体 */
  background-color: #ff8177;
  background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

效果说明 #

• 登录、注册容器各分配约50%屏幕高度，避免互相挤压。
• 修正网格布局拼写错误，确保两列布局正常生效。
• 通过flex与对齐属性，让注册文本在容器内垂直水平居中。

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