Layui表格中align仅控制水平居中，垂直居中需用cellStyle显式设置{'vertical-align': 'middle'}或templet内嵌table-cell结构，CSS全局覆盖须加!important并限定tbody作用域。
align 属性能搞定水平居中，但 vertical-align 不是万能的
直接在列配置里加 align: 'center' 就能让文字水平居中，这是 layui 原生支持的最简方式。但垂直居中不能只靠 align，它只管水平方向。很多人误以为加了 align: 'center' 就自动垂直居中了——其实那是 layui 默认把 td 设为 display: table-cell 后附带的 middle 效果，一旦你改了行高、用了自定义模板或引入 flex 布局，这个“默认垂直居中”就会失效。
常见错误现象：align: 'center' 写了，内容却贴着单元格顶部；或者表头居中了，内容列却偏上/偏下；又或者开了 skin: 'line' 后对齐全乱。
-
align只影响水平对齐，别指望它控制上下位置 - 垂直方向必须显式干预，优先用
cellStyle，不是 CSS 全局覆盖 - 若列用了
templet，cellStyle会失效，得在模板内部用style="vertical-align: middle;"+display: table-cell包裹 - IE11 下
vertical-align在 flex 容器里不生效，得配合align-items: center
cellStyle 是控制单个单元格垂直对齐的唯一可靠入口
cellStyle 函数在每次渲染单元格时执行，返回的对象会直接合并进 <td> 的 <code>style 属性，所以它是绕过 CSS 权重冲突、精准控制单列甚至条件化对齐的首选方式。
正确写法必须满足三点：返回对象、属性名带短横线、值是字符串：
cellStyle: function(row, col) {
return {'vertical-align': 'middle'};
}
容易踩的坑：
- 写成
verticalAlign: 'middle'→ 浏览器不认识，无效 - 返回
null或空对象{}→ Layui 直接忽略，退回到默认对齐 - 在
cellStyle里发 ajax 或异步操作 → 渲染卡顿甚至报错，它必须同步返回 - 只给一列配
cellStyle，其他列没写 → 其他列不会自动继承，仍按默认 middle 显示（但视觉上可能不一致）
templet 场景下如何保住垂直居中
一旦用了 templet，Layui 就不再往 <td> 上加 <code>vertical-align，而是把你的 HTML 直接塞进去。这时候如果模板里只是 {{d.name}}，那文字就按浏览器默认基线对齐，大概率偏上。
安全做法是在模板里手动包裹一层具备垂直居中能力的结构：
templet: '<div style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{d.name}}</div>'
更轻量的替代方案（推荐）：
- 用
line-height匹配单元格高度（需先知道固定行高） - 加
padding-top和padding-bottom模拟居中，兼容 IE11 - 函数式模板里判断空值并补空格/占位符，避免高度塌陷导致“看起来没居中”
注意：templet 返回的 HTML 若含块级元素（如 <p></p>、<div>），会撑开 <code><td> 高度，此时光设 <code>vertical-align 也没用，得用 flex 或 table-cell 包裹内容本身。
全局统一处理时 CSS 选择器要够狠
如果所有列都要「水平+垂直」居中，且不用 cellStyle 逐个写，就得靠 CSS 覆盖。但 Layui 的默认样式带 !important，普通选择器压不住。
有效写法（必须加 !important，且限定作用域）：
.layui-table tbody td {
text-align: center !important;
vertical-align: middle !important;
}
但这条规则有副作用：会影响表头（thead th）、合计行（.layui-table-total td）、操作列图标、复选框等。所以更稳妥的是只命中内容区：
- 锁定 tbody：
.layui-table tbody td（比泛选.layui-table td安全） - 避开表头：
.layui-table tbody td[data-field]（利用 Layui 自动加的data-field属性） - 合计行单独处理：
.layui-table-total td { text-align: center !important; vertical-align: middle !important; }
最后提醒一句：Layui 表格高度计算依赖默认行高，硬改 vertical-align 或 line-height 后，如果开了固定 height，记得在 done 回调里调用 table.resize()，否则滚动条和内容可能错位。
