form水平居中需设width+margin:0 auto；垂直居中须依赖父容器min-height:100vh及flex/grid布局，禁用绝对定位；text-align应作用于父容器而非form本身。
form 元素水平居中必须设 width + margin: 0 auto
直接写 form { margin: 0 auto; } 永远不会生效——因为 margin: 0 auto 只对块级元素起作用，且**必须有明确宽度**。浏览器没宽度就无法计算“左右均分多少空隙”。
常见错误：width: 100% 配 margin: 0 auto，结果表单仍靠左：100% 已撑满父容器，左右无剩余空间可分配。
- 推荐写法：
width: fit-content;+margin: 0 auto;（现代浏览器支持好，内容多时自动扩宽） - 兼容老浏览器用：
width: 400px;或max-width: 500px; width: 90%; - 确保
form没被设成display: inline、float或position: absolute，否则margin: auto被忽略
垂直居中不能只靠 margin，得看父容器高度策略
margin: 0 auto 只管水平，对垂直方向完全无效。想让表单在整屏正中，关键不在 form 自身，而在它的父容器有没有“可参考的高度”。
- 最稳方案：
min-height: 100vh;（不是height: 100vh），防止内容少时页面撑不满导致居中失效 - 移动端必须加
<meta name="viewport" content="width=device-width">，否则 Safari 可能错估vh值 - iOS 14.5 以下需 fallback：
min-height: 100dvh; min-height: 100vh; - 若父容器是
display: flex或display: grid，margin: auto会被覆盖，此时应改用justify-content/place-items
text-align: center 不该直接写在 form 上
给 form 设 text-align: center 是典型误用：它会让所有子元素（label、input、button）内部文字都居中，但表单块本身依然靠左。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正该做的是：把 text-align: center 放在 form 的父容器上，并确保 form 是 inline-block；或者更干脆——用 flex 控制整体位置，内部控件保持 text-align: left 提升可读性。
- 若坚持用
text-align方案，父容器需加font-size: 0消除换行空白，form内重置字体大小 -
text-align对div、p等块级子元素无效，仅影响行内内容 - 表单里嵌了
<div><button></button></div>？那text-align完全不作用于这个div，得单独处理
绝对定位 + transform 是模态框专属，别用在主登录页
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 看似精准，但它让 form 脱离文档流，带来三类实际问题：
- 滚动时可能错位（尤其在 iOS WebView 中，
vh和transform组合易触发渲染 bug） - 无障碍支持差：屏幕阅读器可能跳过或乱序读取
- 表单宽高不可预测时，
translate(-50%, -50%)的负值难调，响应式下极易溢出 - 必须保证父容器有
position: relative，否则top/left相对视口计算，一动就偏
真正该用它的场景只有遮罩层、提示弹窗这类临时浮层；主登录入口请优先选 flex 或 grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
