如何让div.container容器随子元素高度自适应并实现表单居中

实现容器高度自适应 #

• 首先删除.container上的固定height: 500px属性，块级元素默认高度由内部子元素撑开，写死固定高度是阻断自适应的核心原因。
• 若担心内容过少时容器过矮，可将固定高度替换为min-height: 500px，此时内容不足时保持最低高度，内容超出时容器会自动向上扩展容纳全部子元素。
• 如果之前用到了浮动、绝对定位等脱离文档流的子元素，导致容器无法正常撑开（高度塌陷），可给.container添加overflow: auto或标准清除浮动伪元素解决。

实现表单水平居中 #

两种常用方案按需选择：

方案一：margin auto实现（兼容性最优） #

给固定宽度的form设置左右外边距为auto，即可自动在容器内水平居中，不会影响h2的默认对齐：

.container form {
  width: 280px;
  margin: 0 auto;
}

方案二：Flex布局实现（可兼顾垂直居中） #

如果需要h2、表单在容器内同时实现水平、垂直居中，直接给容器开启Flex布局即可：

.container {
  /* 原有属性保留即可 */
  width: 940px;
  margin: 8% auto;
  min-height: 500px;
  /* 新增Flex配置 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素在容器内垂直居中 */
}

如果不需要h2同步居中，可单独给h2添加样式调整对齐：

.container h2 {
  align-self: flex-start; /* 让h2靠左，仅保持表单居中 */
}

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