layui table单元格默认不居中，需手动配置：可在cols中用style设置text-align和vertical-align，或全局css覆盖tbody td样式，嵌入组件时推荐flex布局居中。
layui table 单元格内容不居中？默认没开 CSS 重置
layui 的 table.render() 默认不会给单元格加 text-align 或 vertical-align，所有对齐都靠你手动干预。它只管渲染结构，样式得自己补——这是最容易被当成“bug”去查文档的地方。
常见错误现象：td 里文字贴着左上角、行高撑不开、合并单元格后对齐错乱。
- 必须在
cols配置里用style或templet控制单列，或全局覆盖 CSS - 直接改 layui.css 里的
.layui-table td不推荐——升级会丢 - 如果用了
cellMinWidth或自定义width，要同步检查line-height是否匹配行高
用 cols.style 实现单列居中（最稳妥）
在列定义里加 style 是最干净的做法，不影响其他列，也不依赖全局样式污染。
示例：让“用户名”列文字上下左右居中
cols: [[
{field: 'username', title: '用户名', style: 'text-align: center; vertical-align: middle;'}
]]
-
style值必须是字符串，不能写对象 -
vertical-align: middle只对td生效，对th无效（表头需另加） - 如果列启用了
toolbar或checkbox，这些内置元素的对齐不受该style影响，得单独处理
全局 CSS 覆盖：适用于整张表统一居中
如果所有列都要居中，直接加一条 CSS 更省事，但要注意选择器权重和作用范围。
推荐写法（放在 或页面末尾）：
/* 注意：必须比 layui 默认样式权重高 */
.layui-table tbody td {
text-align: center !important;
vertical-align: middle !important;
}
- 不要只写
.layui-table td，因为 layui 有时会动态插入带 class 的 wrapper，tbody td更稳 - 加
!important是因为 layui 内联了部分样式（比如height），不加可能被覆盖 - 如果表格有冻结列（
fixed: 'left'），冻结区域的td需额外加选择器：.layui-table-fixed-l td
遇到 el-select / el-button 等嵌入组件时居中失效
当单元格里用 templet 渲染 Vue 组件、下拉框或按钮时，vertical-align: middle 通常不起作用——因为这些元素是 inline-block 或 flex 容器，自身有默认基线。
解决办法不是调父级 td，而是控制子元素：
templet: function(d) {
return '<div style="display: flex; align-items: center; justify-content: center; height: 100%;">' +
'<el-button size="mini">操作</el-button>' +
'</div>';
}
- 别依赖
line-height搞垂直居中，嵌入组件高度不固定时会错位 -
height: 100%必须配合display: flex才生效，且父td不能设padding过大，否则挤压空间 - 如果用了 layui 自带的
lay-btn，它本身有line-height，此时用vertical-align: middle反而更简单
表格行高、字体大小、padding 和对齐方式其实是联动的，改一个就得看另外三个。特别是移动端缩放或 zoom 变化时，vertical-align 容易失准——这时候别硬调 CSS，优先考虑用 flex 布局兜底。
