17370845950

用 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 会让实际宽度超出预期。