Firefox下使用setAttribute实现页面居中的解决方案求助

问题出在align属性和<center>标签都是已废弃的HTML特性，不同浏览器兼容性差异极大，Firefox已经不再支持body元素的align属性，因此不能依赖这类老旧写法。以下是兼容Chrome、Edge、Firefox等所有现代浏览器的标准实现方案：

方案1：直接通过JS给body设置CSS样式 #

这种方法适合全局居中页面所有内容，兼顾行内/行内块元素（文字、选择菜单）和块级元素（图片、容器）：

// 让行内/行内块元素（文字、select等）水平居中
document.body.style.textAlign = 'center';
// 让块级元素自身水平居中（需配合宽度设置才生效）
document.body.style.margin = '0 auto';
// 可选：限制body最大宽度，避免内容过宽
document.body.style.maxWidth = '1200px';
// 清除body默认边距，避免影响居中效果
document.body.style.padding = '0';
document.body.style.margin = '0 auto';

方案2：用容器包裹动态生成的内容 #

如果不想全局修改body样式，建议创建一个专属容器包裹所有动态生成的元素，再给容器设置居中样式，更灵活可控：

// 创建居中容器
const centerWrapper = document.createElement('div');
// 设置容器样式
centerWrapper.style.cssText = `
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 20px 0;
`;

// 动态生成内容示例
const selectMenu = document.createElement('select');
selectMenu.add(new Option('选项1', '1'));
selectMenu.add(new Option('选项2', '2'));

const descText = document.createElement('p');
descText.textContent = '这是说明文字';

const img = document.createElement('img');
img.src = 'your-image-path.jpg';
img.style.maxWidth = '100%'; // 避免图片超出容器

// 将内容添加到容器
centerWrapper.append(selectMenu, descText, img);
// 将容器插入body
document.body.appendChild(centerWrapper);

方案3：处理iframe中的文档 #

如果是要居中iframe内部的内容，需确保iframe与主页面同域（跨域无法操作内部文档），然后通过JS访问iframe的document对象并应用样式：

const targetIframe = document.getElementById('your-iframe-id');
// 等待iframe加载完成再操作
targetIframe.onload = () => {
  const iframeDoc = targetIframe.contentDocument || targetIframe.contentWindow.document;
  // 给iframe的body应用居中样式
  iframeDoc.body.style.textAlign = 'center';
  iframeDoc.body.style.margin = '0 auto';
  iframeDoc.body.style.maxWidth = '1200px';
};

关键说明 #

• 永远避免使用align属性、<center>这类废弃特性，它们不属于现代HTML标准，浏览器随时可能停止支持。
• text-align: center负责行内/行内块元素的内容居中，margin: 0 auto负责块级元素自身的水平居中，两者结合能覆盖绝大多数场景。

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