form水平居中需设width或max-width并用margin: 0 auto；视口内水平垂直居中优先用flex布局（父容器display: flex+justify-content/align-items: center+min-height: 100vh）；absolute居中必须配合transform: translate(-50%, -50%)。
登录框在页面中不居中，基本都是因为用了错的居中逻辑——不是 CSS 写错了，而是没对准“谁该居中”“在哪儿居中”“用什么机制居中”。下面直接说清楚怎么做、为什么、容易卡在哪。
form 元素水平居中用 margin: 0 auto，但必须设 width 或 max-width
表单默认是块级元素，margin: 0 auto 对它有效，但前提是它有明确宽度。只写 margin: 0 auto 不生效，90% 是因为漏了宽度设置。
-
width: 400px、max-width: 480px都可以，后者更推荐，兼顾小屏适配 - 别写
width: 100%—— 宽度占满父容器，左右没剩余空间，auto就分不到边距 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给
form加float或position: absolute，这些会让margin: auto失效
整个登录框（含标题、表单）在视口里水平+垂直居中，优先用 Flex 布局
想让登录框不管窗口多高都稳稳居中，display: flex 是最省心、最可靠的选择，不用算像素，也不依赖子元素尺寸。
- 给包裹
form的父容器（比如div.login-container）加：display: flex、justify-content: center、align-items: center - 父容器必须有高度支撑垂直居中，
min-height: 100vh是通用解法 -
form自身不需要设width，但建议加max-width防止在大屏上过宽 - IE10+ 支持，IE9 及更早版本不支持 —— 如果要兼容 IE9，得换方案
用 position: absolute 居中时，transform: translate(-50%, -50%) 缺一不可
当登录框需要脱离文档流（比如浮在遮罩层上），position: absolute 是合理选择，但只写 left: 50% 和 top: 50% 会导致左上角顶在中心点，实际偏右下。
- 子元素（如
.login-box）必须设：position: absolute、left: 50%、top: 50%、transform: translate(-50%, -50%) - 父容器必须设
position: relative（或absolute/fixed），否则定位参考是视口，容易错位 - 这个组合对宽高未知的登录框也有效，但要注意滚动时定位可能失稳，需配合
position: fixed或 JS 修正 - 别把
transform忘了，这是真正居中的关键补丁，不是可选项
别把文本居中和块居中混用，text-align: center 只影响行内内容
给 form 或 div 直接加 text-align: center，不会让它自己居中，只会让里面的文字、按钮标签等行内内容居中——这是初学者最常踩的坑。
- 想让按钮居中：给它的直接父容器（比如一个
div包裹button）设text-align: center - 想让所有输入框里的文字居中：给
input加text-align: center，它对placeholder也生效 - 如果父容器用了 Flex 或 Grid，
text-align对子项无效，会被布局规则接管 -
vertical-align在这里基本没用——它只对行内/表格单元格生效，不是块级居中方案
真正难的不是写哪一行 CSS，而是判断当前登录框所处的上下文：它是否脱离文档流？父容器有没有高度？要不要兼容老浏览器？选错方法不是样式不生效，而是你没在跟浏览器“说同一种语言”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
