如何将.login-form div居中于.bg-opacity div？求解决方法及原理

先看修正后的完整代码：

CSS #

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url(/src/background.PNG);
  background-repeat: repeat-y;
  background-size: cover;
}

.bg-opacity {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(39, 39, 39, 0.96);
  display: grid;
  /* 用更简洁的grid居中写法，替代复杂的行列划分 */
  place-items: center;
}

.login-form {
  width: 5em; /* 对应你原设定的宽度 */
  height: 10em; /* 对应你原设定的高度 */
  background-color: black;
  /* 可选：如果需要表单内部元素居中，添加以下flex属性 */
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  /* 移除absolute定位，让输入框在表单内正常布局 */
  width: 100%;
  box-sizing: border-box;
}

HTML #

<div class="bg-opacity">
  <form action="" class="login-form">
    <input type="text" name="username" size="50">
  </form>
</div>

关键修改及原理 #

• 移除position:absolute：你给.login-form添加的position:absolute会让元素脱离当前文档流（包括Grid布局的规则），导致grid-area属性完全失效，元素默认定位在父容器左上角，这就是你看到的起始位置问题。
• 确保容器高度生效：.bg-opacity设置height:100%时，依赖父元素（body）的高度，而body默认高度由内容撑开，因此必须给html和body都设置height:100%，才能让.bg-opacity占满整个视口高度。
• 简化Grid布局：原代码的grid-template-rows/grid-template-columns写法可以用place-items: center替代，这是Grid布局实现子元素水平+垂直居中的快捷方式，简洁且不易出错。
• 清理冗余HTML结构：原.bg-opacity下多了一层无意义的div，导致Grid的子元素不是表单容器，去掉嵌套后，表单直接作为Grid容器的子元素，才能被正确居中。
• 修正输入框定位：input的position:absolute会让它脱离表单布局，移除后才能正常排列，添加box-sizing:border-box可避免输入框宽度超出表单容器。

补充position属性基础：

• position:absolute的元素会相对于最近的非static定位父元素定位，若无则相对视口；它会脱离正常文档流，其他元素会忽略它的存在。
• 使用Grid/Flex布局时，不要随意给子元素加position:absolute，否则布局规则会直接失效。

内容的提问来源于stack exchange，提问作者Álvaro Huertas