用display: flex+min-height: 100vh+justify-content: center配合viewport meta，可实现移动端真·垂直水平居中；height: 100vh在ios safari中因键盘弹出导致视口变化而失效，须改用min-height并清空html/body边距。
移动端登录框居中：用 flex + viewport 是最稳的组合
直接说结论：display: flex 配合 min-height: 100vh 和 justify-content: center，再加一行 <meta name="viewport" content="width=device-width, initial-scale=1">，就能在绝大多数安卓/iOS浏览器里实现真·垂直水平居中。别碰 position: absolute + top: 50% 这套，移动端键盘弹起后会把框顶出视口，用户根本点不到提交按钮。
为什么 height: 100vh 在 iOS Safari 里会失效
iOS Safari 的 100vh 是按「初始视口高度」算的，不是当前滚动/键盘状态下的可视区域。键盘弹出时，100vh 不变，但实际可用高度缩水，导致登录框被挤到屏幕外。解决方案是改用 min-height: 100vh，并确保父容器不设固定 height：
-
html, body必须清空 margin/padding，且height: auto（别写死height: 100%） -
.login-wrap用min-height: 100vh而非height: 100vh - 避免给
.login-card设margin-top或top，它靠 flex 自动居中
输入框内 placeholder 垂直偏移问题怎么修
移动端 placeholder 文字常比输入内容高 2–4px，尤其在 Android Chrome 和旧版 iOS 上。这不是 bug，是浏览器默认渲染逻辑——它把 placeholder 当作行内元素处理，受 line-height 影响。修复方法很简单：
- 删掉所有对
input设置的line-height，改用padding控制上下留白 - 显式设置
font-size（比如16px），避免系统缩放干扰 - 如果必须调样式，用伪元素：
::-webkit-input-placeholder { line-height: normal; }（仅限 WebKit）
别忽略表单 submit 的默认行为
很多开发者只顾着居中视觉，忘了表单提交本身在移动端的体验断层。常见翻车点：
- 没写
type="submit"的<button></button>，点击后页面刷新但无反馈，用户以为没点上 - 没加
novalidate属性，iOS 会强制校验required字段，但 placeholder 不算有效输入，导致“请输入账号”还在框里时就报错 - 提交后没禁用按钮，用户连点两下，后端收到重复请求（哪怕你前端没发请求，页面刷新也会重发）
真正难的不是让框居中，而是让它在键盘收起、网络延迟、屏幕旋转这些真实场景下，始终可触达、可操作、不跳变。居中只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
