如何调整网页Contact Form容器尺寸？需将铺满页面的容器改为占下半区一半

刚上手做联系表单遇到这种布局问题太正常了，我来给你个简单直接的解决方案——只需要调整CSS里的.container样式，就能让它乖乖待在页面下半部分且只占一半宽度：

修改后的完整CSS代码 #

body { 
  font-family: Arial, Helvetica, sans-serif;
  /* 给body设置最小高度，确保页面高度足够支撑容器定位 */
  min-height: 100vh;
  margin: 0;
}
* { box-sizing: border-box; }
input[type=text], select, textarea { 
  width: 100%; 
  padding: 12px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical; 
}
input[type=submit] { 
  background-color: #4CAF50; 
  color: white; 
  padding: 12px 20px; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
}
input[type=submit]:hover { 
  background-color: #45a049; 
}
.container { 
  border-radius: 5px; 
  background-color: #f2f2f2; 
  padding: 20px;
  /* 核心修改部分 */
  width: 50%; /* 限制容器宽度为页面的一半 */
  margin: 50vh auto 0; /* 50vh让容器顶部对齐页面垂直中点，auto实现水平居中 */
  transform: translateY(-25%); /* 可选：让容器视觉上更贴合下半区域，可根据需求去掉 */
}

关键属性说明 #

• width: 50%: 直接把容器宽度限制为页面的一半，解决铺满问题
• margin: 50vh auto 0:
  • 50vh是视口高度的50%，让容器顶部刚好落在页面垂直中间，也就是下半部分的起始位置
  • auto让容器在水平方向自动居中，避免偏左偏右
• transform: translateY(-25%): 这一步是优化视觉效果的可选操作，让容器整体上移自身高度的25%，看起来更像是“下半部分的一半”，如果觉得不需要可以直接删掉

你的HTML代码完全不用修改，直接保留原来的即可。

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