最简单的方法是用 margin: 0 auto 实现水平居中，配合 text-align: center 让内部按钮、输入框文字等也居中——前提是登录框本身是块级元素且有明确宽度。
最简单的方法是用 margin: 0 auto 实现水平居中，配合 text-align: center 让内部按钮、输入框文字等也居中——前提是登录框本身是块级元素且有明确宽度。
为什么 margin: 0 auto 是最简单起点
它不依赖 JavaScript，不引入新布局模型，兼容所有浏览器（包括 IE8+），只需两步：给表单设宽度 + 左右外边距自动分配。但容易忽略的关键点是：width 或 max-width 必须显式设置，否则 auto 没空间可分。
-
width: 400px或max-width: 480px都行；width: 100%会失效 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给
<form>加float或position: absolute，这些会让margin: 0 auto失效
text-align: center 是按钮和输入框文字居中的关键
表单里的 <input>、<button> 默认是行内或行内块级元素，它们不会响应父容器的 margin: 0 auto。但父容器上加 text-align: center 就能统一控制所有行内内容的水平对齐。
- 这个样式要加在包裹
<form>的外层<div>上，而不是直接加在<form>上（因为<form>是块级，text-align对它自身无效） -
text-align: center会让placeholder文字也居中，无需额外处理 - 如果输入框需要垂直居中对齐标签，得单独用
vertical-align: middle或改用 Flex 布局子项对齐
当必须垂直居中时，别硬套 margin: 0 auto
只靠 margin: 0 auto 只能解决水平方向。如果登录框必须在视口里上下左右都居中（比如全屏登录页），就必须引入高度控制逻辑。此时最轻量的补救是：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器（如
<body>或一个包裹<form>的<div>）加min-height: 100vh - 再配合
display: flex+justify-content: center+align-items: center - 这个组合不破坏原有
<form>的宽度设定，也不需要算像素偏移
真正容易被忽略的是：居中不是“设一个属性就完事”，而是要分清目标对象（是整个表单？还是里面的文字？还是输入框里的内容？）和作用域（哪个元素该设 width？哪个该设 text-align？哪个该撑高？）。错一层，就全偏了。
