移动端登录框水平居中用max-width+margin:0 auto即可，垂直居中需父容器flex布局加min-height:100vh，且必须设置viewport元标签，输入框和按钮需分别处理居中。
移动端登录框水平居中靠 margin: 0 auto 就够用
只要登录框是块级元素（<form> 默认就是），给它设 max-width（比如 max-width: 480px），再加 margin: 0 auto，就能在手机横竖屏下都稳稳水平居中。别用 width: 100%——那等于没留空隙，auto 失效。
常见错误：父容器用了 display: flex 或 display: grid，会直接覆盖 margin: auto 行为；或者给 <form> 加了 float 或 position: absolute，也一样失效。
推荐写法：
.login-form {
max-width: 480px;
margin: 0 auto;
padding: 20px;
}
垂直居中必须用 flex + min-height: 100vh
手机屏幕高度多变，position: absolute 配 top: 50% 容易在软键盘弹出时错位，且无法响应视口变化。真正可靠的方案是让登录框的父容器（比如 <body> 或一个包裹 <form> 的 <div>）启用 Flex 布局。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex、justify-content: center、align-items: center - 父容器必须有高度支撑垂直对齐，
min-height: 100vh是底线（不是height: 100vh，否则内容超长会被截断） -
<form>自身不用设固定height，用padding和max-width控制视觉尺寸即可
viewport 元标签漏掉就白忙活
没有这行，手机浏览器默认按 980px 宽度渲染页面，max-width: 480px 会缩在左上角，根本看不出居中效果。
必须在 <head> 里加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉这个，所有 CSS 居中都会在真机上“失效”——不是代码错了，是浏览器压根没按设备宽度解析。
输入框和按钮的居中不是“整体居中”的子集
text-align: center 对按钮有用，但对 <input> 标签无效；给 <input> 单独加 margin: 0 auto 也没用，因为它是行内块级元素。
正确做法：
- 让按钮居中：把
<button>包在<div>里，该<div>设text-align: center - 让输入框左右撑开又居中：给
<input>设display: block+width: 100%+margin: 0 auto（此时需确保父容器不设text-align干扰） - 密码框和账号框之间留空隙：用
margin-bottom，别依赖换行或空格
最易被忽略的是：移动端软键盘弹起时，100vh 会变小，导致 flex 布局把表单顶到视口顶部之外。如果遇到，优先检查是否用了 height: 100vh 而非 min-height: 100vh，以及有没有 JS 强制滚动干扰。
