如何让表单在question-box容器及背景图片中居中？

我有一个名为question-box的容器，里面包含一张图片，希望表单/输入框能在这个容器和背景图片上居中显示。以下是我当前的CSS和HTML代码：

.question-box {
  width: 50%;
  height: 400px;
  /* make dependent on content inside */
  /*padding: 50px;*/
  margin: auto;
  border: 10px solid #6c85bd;
  box-sizing: border-box;
  border-radius: 25px;
  position: relative;
}

.question-box img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.question-box form {
  display: block;
  height: 50%;
  position: absolute;
}

input {
  width: 100%;
}

<div class="question-box">
  <img src="<?php echo htmlspecialchars($defaultImage2); ?>"></img>
  <form class="form" action="" method="post">
    <input type="text" name="name" placeholder="Name..">
    <button type="submit" name="submit">Sign up!</button>
  </form>
</div>

question-box和图片的样式没问题，作为CSS新手，我试过很多方法但都没成功，求正确的解决方式。

解决方法 #

要让表单在容器内居中，关键是利用绝对定位+偏移+变换的组合，同时可以调整表单内部元素的布局，让输入框和按钮更美观：

修改后的CSS代码如下：

.question-box {
  width: 50%;
  height: 400px;
  margin: auto;
  border: 10px solid #6c85bd;
  box-sizing: border-box;
  border-radius: 25px;
  position: relative;
  /* 可选：图片加载慢时，给容器加过渡背景色 */
  background-color: #eee;
}

.question-box img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.question-box form {
  /* 核心：让表单在容器内完全居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 限制表单宽度，避免拉伸过宽 */
  width: 80%;
  /* 让高度随内容自适应，替代固定高度 */
  height: auto;
  /* 让表单内部元素垂直排列并留间距 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* 可选：半透明背景提升输入可读性 */
  background-color: rgba(255,255,255,0.8);
  padding: 20px;
  border-radius: 10px;
}

input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #6c85bd;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

关键修改说明： #

• top: 50%; left: 50%; transform: translate(-50%, -50%);：这是绝对定位元素居中的经典写法——先让表单左上角移到容器中心，再把表单自身往左上偏移一半，实现整体居中。
• 把表单的固定height: 50%;改成height: auto;：让表单高度随输入框、按钮的尺寸自适应，避免多余空白。
• 用flex布局表单内部：flex-direction: column让元素垂直排列，gap:15px给元素间加间距，排版更整洁。
• 可选的半透明背景：让表单在图片上更清晰，不会被图片内容干扰输入。

内容的提问来源于stack exchange，提问作者Amelia-may Wilson