使用 CSS Flexbox 的 flex-direction: column 配合 text-align: center，可使表单内所有子元素（图片、输入框、按钮、链接）在独立行中垂直排列，同时整体水平垂直居中。
使用 css flexbox 的 `flex-direction: column` 配合 `text-align: center`，可使表单内所有子元素（图片、输入框、按钮、链接）在独立行中垂直排列，同时整体水平垂直居中。
要实现登录表单中每个元素独占一行且整体在页面中水平+垂直居中，关键在于对包裹内容的容器（即 .fields）应用垂直布局 + 内容居中策略，而非仅依赖外层容器的居中逻辑。
✅ 核心解决方案
只需为 .fields 添加以下样式：
.fields {
display: flex;
flex-direction: column; /* 垂直堆叠子元素 */
text-align: center; /* 水平居中内联级内容（img、button、a 等） */
gap: 1rem; /* 可选：添加统一间距，提升可读性 */
}
/* 修正 input 默认左对齐问题 */
input,
button,
a {
margin: 0 auto; /* 确保块级表现的表单控件也水平居中 */
width: 100%; /* 可选：统一宽度，增强一致性 */
max-width: 300px; /* 推荐：防止过宽，保持响应式友好 */
}? 完整优化后的 CSS（含健壮性增强）
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh; /* 确保 body 占满视口高度 */
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffebee; /* 浅红背景，便于观察居中效果 */
}
.tr, .form {
display: flex;
justify-content: center;
align-items: center;
}
.tr {
width: 50%;
height: 50%;
background-color: #fff9c4; /* 浅黄 */
}
.form {
width: 80%;
height: 80%;
background-color: #c8e6c9; /* 浅绿 */
}
.fields {
display: flex;
flex-direction: column;
text-align: center;
gap: 1.2rem;
}
.fields img {
width: 30%;
max-width: 120px;
margin: 0 auto;
}
.fields input,
.fields button,
.fields a {
width: 100%;
max-width: 280px;
margin: 0 auto;
padding: 0.75rem 1rem;
border: 1px solid #bdbdbd;
border-radius: 4px;
font-size: 1rem;
}
.fields button {
background-color: #2196f3;
color: white;
cursor: pointer;
}
.fields a {
color: #1976d2;
text-decoration: none;
font-weight: 500;
}⚠️ 注意事项
- 避免 input 文本左对齐陷阱：<input> 默认是替换元素，text-align: center 对其内部文本无效；应通过 text-align: inherit 或直接设置 padding + width 控制视觉居中。
- min-height: 100vh 必须作用于 body 或根容器：否则 .container 的 height: 100% 会因父级高度未定义而失效。
- 慎用 width: 100% 在嵌套 flex 容器中：.tr 和 .form 已设固定宽高百分比，确保层级间尺寸可预期。
- 响应式建议：在小屏幕下可添加媒体查询，将 .fields 的 gap 减小或调整 max-width，保障移动端体验。
通过以上配置，表单元素将严格按顺序垂直排列、每行一个，且整体在页面正中央——简洁、语义清晰、兼容性强，是现代 CSS 表单布局的标准实践。
