如何用JavaScript实现两个div垂直居中？现有代码失效求解决

我来帮你搞定这个div居中的问题，先拆解下你遇到的两个核心问题：

为什么你的居中代码没生效？ #

你用的wrapper.align = "center"是非常老旧的HTML属性，现在标准里已经不推荐使用了，而且它主要用来对齐行内元素或文本，对块级div的整体居中根本起不到作用。另外，你直接给div设置width和height属性也是错误的——这些是CSS属性，不是HTML原生属性，必须通过style设置才会生效。还有你写的clear:float也是无效的，clear属性的有效值是left/right/both/none，没有float这个选项。

正确的居中实现方式 #

下面给你两种常用且靠谱的居中方案，根据你的需求选择即可：

方法1：使用CSS Flexbox（推荐，现代浏览器全支持） #

如果想让wrapper在页面中水平居中，同时方便控制内部元素对齐，Flexbox是最优解：

// 创建wrapper并设置样式
var wrapper = document.createElement('DIV');
// 用style设置宽高（必须加单位px）
wrapper.style.width = `${x * rows}px`;
wrapper.style.height = `${y * columns}px`;
// 让wrapper自身在父容器（这里是body）水平居中
wrapper.style.margin = '0 auto';
// 若需要让wrapper内部元素也居中，可添加以下配置
wrapper.style.display = 'flex';
wrapper.style.justifyContent = 'center';
wrapper.style.alignItems = 'center';

// 创建buttonWrap并修复清除浮动的代码
var buttonWrap = document.createElement('DIV');
buttonWrap.style.clear = 'both';
// 让buttonWrap也和wrapper对齐居中
buttonWrap.style.margin = '0 auto';
buttonWrap.style.width = `${x * rows}px`; // 和wrapper同宽更美观

// 别忘了把元素添加到页面中
document.body.appendChild(wrapper);
document.body.appendChild(buttonWrap);

方法2：使用margin:auto实现传统块级居中 #

这是兼容性拉满的传统方案，适合需要兼容旧浏览器的场景：

var wrapper = document.createElement('DIV');
wrapper.style.width = `${x * rows}px`;
wrapper.style.height = `${y * columns}px`;
// 核心：块级元素设置左右margin为auto，且必须有明确宽度
wrapper.style.marginLeft = 'auto';
wrapper.style.marginRight = 'auto';

var buttonWrap = document.createElement('DIV');
buttonWrap.style.clear = 'both';
buttonWrap.style.margin = '0 auto';
buttonWrap.style.width = `${x * rows}px`;

document.body.appendChild(wrapper);
document.body.appendChild(buttonWrap);

解决fixed定位重叠的问题 #

你设置fixed后元素重叠，是因为fixed定位的元素会脱离正常文档流，所有fixed元素默认堆叠在一起，后创建的元素层级更高。解决办法有两个：

1. 设置z-index层级与位置：给每个fixed元素分配不同的z-index值（数值大的在上方），同时设置不同的位置避免重叠：

wrapper.style.position = 'fixed';
wrapper.style.zIndex = 10; // 数值小的在下层
wrapper.style.top = '20px'; // 固定在视口上方

buttonWrap.style.position = 'fixed';
buttonWrap.style.zIndex = 20; // 数值大的在上层
// 让buttonWrap在wrapper下方显示，预留间距
buttonWrap.style.top = `${y * columns + 40}px`;

2. 改用非fixed定位：如果不是必须固定在视口，尽量使用relative或默认的static定位，这样元素会按文档流顺序排列，不会出现重叠问题。

内容的提问来源于stack exchange，提问作者Need P. Help