无法将注册模块元素居中？CSS布局问题求助

问题根源 #

你当前代码里的main__container_sign设置了float: left和超大的padding-right: 3000px、padding-bottom: 2000px，这些属性会直接把容器拽到左侧，还撑出大量空白，完全破坏了居中布局；另外grid-template-columns: ifr ifr是笔误，正确的单位是fr，而且这里只有一个子元素，多列布局也没必要。

修改方案 #

替换你现有代码中「Actual registry」部分的CSS为以下内容：

/* Actual registry*/
.main__sign {
  background-color: #6e50f5;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main__container_sign {
  margin: 0 auto;
  width: 100%;
  max-width: 1270px;
  padding: 0 50px;
}

.main__content_sign {
  text-align: center;
}

.main__content_sign h1 {
  font-size: 1.3rem;
  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;
}

.main__content_sign h2 {
  font-size: 1rem;
  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;
}

.main__content_sign p {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

修改说明 #

1. 给main__sign添加flex布局，配合align-items: center和justify-content: center，让整个注册模块的内容在垂直、水平方向都居中，min-height: 80vh保证容器高度足够，避免内容偏上。
2. 删掉main__container_sign里的float和超大padding，这些属性完全是布局干扰项。
3. 保留main__content_sign的text-align: center，确保内部的h1、h2、p文本水平居中。

HTML部分无需修改，保持原样即可。

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