fixed元素用left:0;right:0;margin:auto无法居中，因margin:auto在脱离文档流的fixed元素上水平居中无效，必须显式设置width（如width:300px或fit-content）；最可靠方案是top:50%;left:50%;transform:translate(-50%,-50%)。
fixed定位下用
为什么没居中？
因为
在
元素上对水平居中**无效**，除非同时设置了明确的
。浏览器不会自动计算“剩余空间”来分配左右margin——它只在块级正常流中才这么干。
常见错误现象：
看起来没反应，元素宽度撑满整个视口，根本没居中。
必须显式设置
（比如
或
）
本身会让元素宽度占满，和
冲突，除非宽度小于容器
若用
，需注意浏览器兼容性（IE全不支持，Edge 16+ 开始支持）
真正可靠的居中写法：transform + top/left
这是目前最通用、行为可预测的方式，不依赖宽度是否已知，也不受
类型影响。
核心逻辑是：先用
把左上角锚点移到视口中心，再用
反向偏移自身宽高的50%。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
和
用
，不是
——它是相对于视口的百分比
里的负值是相对于元素自身尺寸，不是视口
即使元素内容动态变化（比如文字增多导致宽高变），依然保持居中
兼容性好：Chrome 12+、Firefox 3.5+、Safari 3.1+、Edge 12+
如果必须用
，该怎么配？
可以，但条件苛刻：元素必须有明确宽度，且不能同时设
和
为
。
正确组合是：
+
/
定垂直位置 +
/
留空 +
。
去掉
，否则宽度被强制为100%，
无处可分
垂直方向建议用
等具体值，或配合
微调
必须是固定值（如
）或
（注意兼容性）
IE11 不支持
，会退化为
（即撑满）
flex方案在fixed里能用吗？
能，但得套一层容器，不能直接在fixed元素上用
居中自己。
典型做法是：外层
容器设
和
，内层子元素自然居中。这本质是布局委托，不是单元素控制。
外层必须有宽高（比如
），否则flex轴无参考
子元素无需设
，避免层叠上下文干扰
性能略低于
方案（触发flex layout计算），但现代浏览器差异可忽略
IE10+ 支持
，但
和某些值有bug，建议用明确
居中看着简单，但
脱离文档流后，很多平时有效的套路会失效；最容易被忽略的是：没有
就别指望
能干活，而
那行偏移量，少写个负号或写成
就彻底偏了。
left: 0; right: 0; margin: automargin: autoposition: fixedwidthdiv { position: fixed; left: 0; right: 0; margin: auto; }widthwidth: 300pxwidth: fit-contentleft: 0; right: 0margin: autofit-contentdisplaytop: 50%; left: 50%transform: translate(-50%, -50%)topleft50%50pxtransformdiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}margin: autoleftright0position: fixedtopbottomleftrightmargin: 0 autoleft: 0; right: 0margin: autotop: 20pxtransformwidth400pxfit-contentfit-contentwidth: autodiv {
position: fixed;
top: 100px;
width: 400px;
margin: 0 auto;
}display: flexfixeddisplay: flexjustify-content / align-itemswidth: 100vw; height: 100vhpositiontransformflexflex: 1justify-content: center; align-items: centerdiv.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}fixedwidthmargin: autotransformpx