关于表单无法在Div容器内居中显示的问题求助

问题根源 #

你的代码中，.content 和 .square 元素添加了 align-items、justify-content 属性，但未设置 display: flex——这两个属性是Flex容器的专属属性，只有当元素被声明为Flex容器时，它们才会生效。此外，.content 作为绝对定位元素，即便设置了宽高100%，也不具备Flex容器的布局能力，无法让内部表单实现垂直居中。

修复后的完整代码 #

CSS 代码 #

form#id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  /* 可选：添加内边距避免内容贴边 */
  padding: 20px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：添加背景色方便查看效果 */
  background-color: #f0f0f0;
}

.square {
  position: relative;
  width: 80vmin;
  border: solid white 5px;
  box-sizing: border-box;
  border-radius: 30px;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 核心修改：添加display:flex，让content成为Flex容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 29px;
  /* 可选：添加背景色区分区域 */
  background-color: #fff;
}

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

HTML 代码 #

<div class="container">
  <div class="square">
    <div class="content">
      <form id="id">
        <label for="input1">write ID</label>
        <input type="number" name="input1" id="input1" placeholder="id">
      </form>
    </div>
  </div>
</div>

核心修改说明 #

• 给 .content 添加 display: flex，使其成为Flex容器，这样内部表单就能借助容器的 align-items: center 和 justify-content: center 实现垂直+水平双居中。
• 移除了 .square 和 .square:after 中无效的 align-items、justify-content 属性——这两个元素并非Flex容器，这些属性不会产生任何布局效果。

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