最稳的弹窗居中方案是position: fixed配合top: 50%、left: 50%和transform: translate(-50%, -50%)，因top/left仅定位左上角，需transform回拉自身宽高一半才能精准居中，且不受内容动态变化、border或shadow影响。
弹窗提示语本身不是独立元素，它必须嵌套在弹窗容器里；居中要解决的是整个弹窗（含提示语）在视口中的水平垂直居中，而不是只对 <p> 或 <span> 单独设 text-align: center —— 那只能居中文本行，不能让弹窗框居中。
为什么 text-align: center 不管用
很多人一看到“提示语居中”，立刻给提示文字加 text-align: center，结果弹窗框还是歪的。这是因为：text-align 只控制块内**行内内容**的水平对齐，不影响容器自身位置。弹窗框如果用 position: absolute 且没设定位基准，或者父容器没清除默认 margin，它就会贴左上角。
- 仅靠
text-align+vertical-align无法让整个弹窗框在视口中居中 -
margin: auto在position: absolute下必须配合四边为0才生效，但弹窗通常有宽高约束，容易失效 - 直接写
top: 50%; left: 50%而不加transform: translate(-50%, -50%)，会让弹窗左上角落在中心点，整体偏右下
position: fixed + transform 是最稳解法
这是目前兼容性好（IE9+）、不依赖内容宽高、滚动时也不偏移的通用方案。关键不在提示语本身，而在弹窗外层容器的定位逻辑。
- 遮罩层和弹窗都用
position: fixed，锚定视口，滚动不影响位置 - 弹窗容器设
top: 50%; left: 50%; transform: translate(-50%, -50%) - 不需要知道弹窗宽高，
translate是相对于自身尺寸计算的，动态内容（比如加载后变高的提示语）也能保持居中 - 务必确保弹窗父级（比如
<div class="modal-overlay">）不干扰定位——它本身不用设position: relative，因为fixed直接相对视口
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="modal-overlay">
<div class="modal-box">
<p class="tip-text">操作成功！</p>
</div>
</div>
CSS 关键部分：
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 1000;
}
.modal-box {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 320px;
padding: 20px;
background: #fff;
border-radius: 4px;
z-index: 1001;
}
.tip-text {
margin: 0;
text-align: center;
}
用 Flex 布局时父容器高度必须明确
如果弹窗外层是 display: flex，常见错误是只写 height: 100%，结果弹窗沉底或不显示——因为 100% 高度需要上级有可计算高度。
- 父容器（如
.modal-overlay）必须设min-height: 100vh或height: 100vh，不能只靠内容撑开 -
justify-content: center和align-items: center必须同时存在，缺一不可 - 弹窗子元素（
.modal-box）不能设position: absolute/fixed，否则会脱离 flex 流，居中失效 - IE10 及以下不支持 flex，若需兼容，得退回
fixed+transform方案
真正容易被忽略的不是“怎么写居中代码”，而是弹窗插入 DOM 的时机和上下文：JS 动态创建弹窗时，如果直接 document.body.appendChild(modal)，而 body 没清 margin、没设 position: relative（对 absolute 场景），或者没处理 overflow: hidden 防止底层滚动，都会导致视觉错位。居中只是表象，定位上下文才是根因。
