HTML/CSS联系框无法居中问题求助及原因咨询

刚学习HTML和CSS，尝试了Google搜索到的justify-content、align-items、align-content与display:flex的多种组合方案，仍无法将页面中的contact-box居中——页面要么无变化，要么联系框偏移至左上角。此前制作的HTML元素也频繁出现无法居中的情况，希望了解该问题的成因。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Us</title>
    <link rel="stylesheet" href="./CSS/Style.CSS" />
  </head>
  <body>
    <div class="contact-box">
      <form>
        <!--不确定HTML验证是什么意思，但我给姓名和邮箱字段添加了required属性-->
        <input
          type="text"
          class="input-field"
          placeholder="Full Name"
          required
        />
        <input
          type="text"
          class="input-field"
          placeholder="Your Email"
          required
        />
        <!--在表单中添加下拉菜单-->
        <select id="Priority">
          <option value="Priority">Message Priority</option>
          <option value="High">High Priority</option>
          <option value="Medium">Medium Priority</option>
          <option value="Low">Low Priority/ non-urgent</option>
        </select>
        <!--我不明白为什么placeholder不显示-->
        <textarea
          type="text"
          class="input-field textarea-field"
          placeholder="Your Message"
        >
        </textarea>
        <!--创建按钮-->
        <button type="button" class="btn">Send Message</button>
      </form>
    </div>
  </body>
</html>

CSS代码 #

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: lightpink;
    font-family: sans-serif;
}

/*设置联系框样式*/
.contact-box{
    width: 500px;
    background-color: antiquewhite;
    box-shadow: 0 0 20px 0 #999;
   /*以下我注释掉了联系框样式内的所有内容，并尝试了所有能找到的居中对齐方法*/
    top: 50%;
    left: 50%;
    transform: translate(-50%.-50%);
    position: absolute;
}

form{
    margin: 35px;
}

/*设置姓名、邮箱等输入框样式*/
.input-field{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}

/*增大消息输入框尺寸*/
.textarea-field{
    height: 150px;
    padding-top: 10px;
}

/*设置发送消息按钮样式*/
.btn{
    border-radius: 20px;
    color: #fff;
    margin-top: 18px;
    padding: 10px;
    background-color: #47c35a;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/*设置下拉菜单样式*/
input [type=text], select{
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
}

问题成因与解决方法 #

1. 绝对定位写法的语法错误

你当前使用的绝对定位居中代码里，transform: translate(-50%.-50%);中逗号写成了英文句号，这会导致该属性完全失效，所以contact-box会因为top:50%; left:50%;定位到页面右上角方向，而没有偏移回中心。修正后应为：

transform: translate(-50%, -50%);

2. Flex布局未正确应用到父容器

如果想用Flex实现居中，需要给contact-box的直接父元素（也就是body）设置Flex属性，因为Flex的对齐属性是作用在容器上，控制子元素的排列：

body{
    background-color: lightpink;
    font-family: sans-serif;
    /* 添加以下Flex属性 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 让body占满视口高度，否则垂直居中不生效 */
}

同时要移除contact-box里的绝对定位相关代码，避免两种布局方式冲突。

3. 其他额外问题（顺带解决）

• 文本域的placeholder不显示：因为你在<textarea>标签里写了换行空格，浏览器会把这些内容当作默认值，覆盖placeholder。需要把标签写成闭合形式或者清空内部内容：

<textarea
  class="input-field textarea-field"
  placeholder="Your Message"
></textarea>

• 下拉菜单的样式选择器错误：input [type=text]里的空格会选择input元素内部的type=text子元素，应该去掉空格写成input[type=text]，否则这个样式不会生效。

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