layui.layer.open 默认不支持指定父容器居中，需禁用 fixed、手动计算坐标并设 absolute 定位；因 layer 强制重写 left/top、offset 和 fixed: false 均以 viewport 为参考，且外层 wrapper 始终 append 到 body，故必须在 success 回调中获取 .layui-layer 元素，结合目标容器 offset 及宽高计算绝对定位值，并确保父容器有 position: relative。
layui.layer.open 默认不支持“在指定父容器内居中”，必须禁用 fixed 定位、手动计算坐标并设置 absolute 定位。
为什么直接用 offset 或 fixed: false 不行
layer 内部会强制重写 left/top 样式，并覆盖 transform 效果；offset: ['50%', '50%'] 是相对于 viewport 的，不是目标容器；fixed: false 只是取消固定定位，但 layer 仍默认用 position: relative 套一层，导致后续 absolute 子元素相对 body 定位。
-
area和offset参数始终以 window 为参考系，无法切换上下文 - 即使内容 DOM 已插入目标容器，layer 外层 wrapper 仍由 layer 自己 append 到
body - 不显式设置父容器
position: relative，absolute弹层会逐级向上找定位上下文，大概率落到body上
正确做法：在 success 回调里接管弹层 DOM
核心是拿到最外层 .layui-layer 元素，手动算出它在目标容器内的 left/top 值，并设为 position: absolute。
- 调用
layer.open()时必须加fixed: false, anim: -1（禁用动画避免 DOM 尚未就绪） -
success回调中用$(layero)拿到弹层根节点，再用$('#my-container')获取目标容器 - 用
$container.offset()得到容器左上角文档坐标，再结合$container.width()/height()和$layer.outerWidth()/outerHeight()算中心偏移 - 必须给父容器加
style="position: relative"，否则absolute会脱离预期范围
layer.open({
type: 1,
content: $('#my-dialog'),
fixed: false,
anim: -1,
success: function(layero, index) {
const $layer = $(layero);
const $container = $('#my-container');
const containerOffset = $container.offset();
const containerW = $container.width();
const containerH = $container.height();
const layerW = $layer.outerWidth();
const layerH = $layer.outerHeight();
<pre class='brush:php;toolbar:false;'>$layer.css({
position: 'absolute',
left: containerOffset.left + (containerW - layerW) / 2,
top: containerOffset.top + (containerH - layerH) / 2
});} });
容易被忽略的兼容性细节
这些点不处理，弹层可能错位、闪动或随滚动跑偏：
- 父容器若设置了
transform、perspective或filter，会创建新的 containing block，导致offset()返回值不准——应避免在容器上用这类 CSS - 容器若有滚动条且希望弹层随容器滚动保持居中，不能只靠一次
success计算，得监听scroll和resize事件动态更新left/top - 如果父容器是 flex/grid 布局，确认它没被
display: contents或visibility: hidden干扰，否则offset()可能返回null - IE 下
outerWidth()可能包含 border，建议统一用getBoundingClientRect()替代（尤其当容器有 box-sizing: border-box 时）
真正麻烦的从来不是计算本身，而是父容器是否“干净”——有没有意外的定位上下文、有没有隐藏的 transform、有没有被 JS 动态修改过尺寸。动手前先检查 $('#my-container').css('position') 和 getBoundingClientRect() 返回值，比反复调试样式更省时间。
