书签工具创建的Div元素已生成但不可见，需实现居中显示

你创建的div仅存在于内存中，必须添加到DOM树才能在页面显示。同时需要通过样式设置让它居中并保证可见性，以下是两种实现方案：

原生JavaScript方案 #

// 创建元素
const g = document.createElement('div');
g.setAttribute("id", "divcontainer");

// 填充UI内容
g.innerHTML = `
  <p>这里是你的组件内容</p>
`;

// 设置核心样式：居中+可见性
g.style.position = 'fixed'; // 固定在视口，不随页面滚动移动
g.style.top = '50%';
g.style.left = '50%';
g.style.transform = 'translate(-50%, -50%)'; // 实现精准居中
g.style.width = '300px'; // 固定宽度，避免内容撑满屏幕
g.style.padding = '20px';
g.style.backgroundColor = '#fff'; // 白色背景，避免和页面背景融合
g.style.border = '1px solid #ddd';
g.style.zIndex = '9999'; // 确保组件在页面最上层，不被其他元素遮挡
g.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'; // 添加阴影提升UI质感

// 将元素挂载到DOM树
document.body.appendChild(g);

jQuery方案（若需要） #

// 一键创建、设置样式、填充内容并挂载到DOM
$('<div id="divcontainer">')
  .html('<p>这里是你的组件内容</p>')
  .css({
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '300px',
    padding: '20px',
    backgroundColor: '#fff',
    border: '1px solid #ddd',
    zIndex: '9999',
    boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
  })
  .appendTo('body');

关键注意点 #

• DOM挂载：必须通过appendChild或appendTo将创建的元素添加到页面DOM结构中，否则元素仅存在于内存，无法显示。
• 居中逻辑：fixed定位+50%偏移+translate反向偏移是适配所有屏幕的可靠居中方案，不会因元素尺寸变化失效。
• 可见性保障：设置背景色、边框和高z-index，避免组件被页面原有内容遮挡或与背景融为一体。

内容的提问来源于stack exchange，提问作者Cole Bauml