用 flex 实现登录页居中表单只需两步：外层容器设 display: flex、justify-content: center、align-items: center 和 min-height: 100vh 实现视口居中；表单内设 flex-direction: column 与 gap 统一间距，并配合 box-sizing: border-box 和响应式调整确保适配。
用 Flex 实现登录页居中表单，核心就两点：让整个页面内容垂直+水平居中，再让表单自身有合理间距和结构。不需要复杂嵌套，几行 css 就能搞定。
容器设为 flex 并居中对齐
把 body 或最外层包裹容器设为 display: flex，配合 justify-content: center（主轴居中）和 align-items: center（交叉轴居中），就能让表单在视口正中间。
- 推荐作用于一个全高容器（比如
min-height: 100vh的.login-container），避免直接改 body 影响全局 - 加上
flex-direction: column可让子元素纵向排列，更适合登录页结构
表单内部用 flex 控制输入项与按钮
登录表单本身（form 或 .login-form）也可以用 flex 布局，让输入框、按钮等按需排列：
-
flex-direction: column让用户名、密码、登录按钮从上到下堆叠 -
gap: 12px统一控制各元素间距，比写多个 margin 更干净 - 给 input 和 button 设固定宽（如
width: 100%或max-width: 320px）防止过宽
响应式微调：小屏时保持可读性
手机上看太宽的表单会挤压文字，加个简单媒体查询即可：
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 480px)下，把表单宽度收窄（如width: 90%） - 减小字体、内边距（
padding: 12px→8px），避免按钮文字换行 - 保持 flex 居中逻辑不变，只调尺寸，布局结构不破坏
不复杂但容易忽略：记得给 input 和 button 加 box-sizing: border-box，否则 padding 会让实际宽度超出预期。