如何让div在动态创建的表格行中居中显示？

你的问题出在直接把div加到表格行（<tr>）里——表格行的直接子元素必须是单元格（<td>），没有单元格包裹的div会破坏表格布局，导致它靠左显示。按下面的步骤修改代码就能解决：

1. 插入新行后，先创建一个跨列的单元格，让它占满整行宽度；
2. 把你的div放到这个单元格里。

修改后的完整代码：

table.rows[0].cells.item(0).innerHTML = "<b>Confirm all</b>";
var inp = document.createElement("INPUT");
inp.setAttribute("type","checkbox");
table.rows[0].cells.item(1).appendChild(inp);
var row = table.insertRow(1);
// 新增：创建跨列单元格，colspan值对应原表格的列数（这里是2列）
var cell = row.insertCell(0);
cell.colSpan = "2";
cell.style.padding = "5px";
// 保持你的div样式不变
var span = document.createElement("div");
span.style.width = "100%";
span.style.textAlign = "center";
span.style.lineHeight = "50px";
span.innerText = "OR";
// 把div放到单元格里，而不是直接放row里
cell.appendChild(span);

额外说明：

• verticalAlign是表格单元格的样式，给div加这个无效，要给td加cell.style.verticalAlign = "middle";才能实现垂直居中；
• 跨列的colspan值要和表格总列数一致，这样单元格才能撑满整行，div的text-align:center才能生效。

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