嗨，我正在尝试在网站上制作一个表单，但是我希望表单（输入框和提交按钮）位于背景图像和框的中心

Question

在我的网站上，我有一个名为“问题框”的背景容器/框，在这个框内我有一个 Img。在此容器/框和图像上，我希望表单/输入框位于该框的中心。 这是我的相关HTML代码，

<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>

这是 CSS 代码，我认为这是问题所在，

`.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%;
}`

类“question-box”和“img”没有任何相关问题。

我已经尝试了快速搜索中访问的大部分内容，但是因为我了解CSS，所以我认为我做得不正确，这就是为什么我的代码无法工作？ 如果这是一个简单的错误，我很抱歉，这只是我的愚蠢，但我已经在这个问题上尝试了一个小时，但没有任何改善。

Answer 1

用这个更新你的CSS：

.question-box form {
   display: block;
   height: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

这将为您集中表格。