vertical-align: middle 在 th 上无效，因 Layui 表头 tr 高度由 JS 动态计算，直接设 line-height 易被覆盖或偏移；最稳方案是用 padding（如 12px 15px）替代 line-height 实现视觉垂直居中，并配合 text-align: center 和 font-weight: 700 确保水平居中与加粗，且 CSS 需在 layui.css 后加载。
为什么 vertical-align: middle 在 th 上无效
因为 th 默认是 display: table-cell，而垂直居中必须同时满足两个条件：有明确的行高（height 或 line-height），且父级 tr 没被其他样式挤压。layui 的表头 tr 高度由内部 js 动态计算，直接设 line-height 常被覆盖或导致文字上下偏移。更稳的方式是用 padding 控制视觉居中，不依赖 line-height。
用 padding 替代 line-height 实现真正居中
这是 Layui 场景下最可靠的做法——避开行高冲突，兼容重绘与 resize：
- 给
.layui-table thead th设置统一padding: 12px 15px（上/下内边距决定视觉高度，左/右控制横向间距） - 配合
text-align: center确保水平居中 - 加粗用
font-weight: 600或700，别只写bold（部分字体族下解析不稳定） - 确保你的 CSS 文件在
layui.css之后加载，否则权重不够
示例 CSS：
.layui-table thead th {
padding: 12px 15px;
text-align: center;
font-weight: 700;
}
只对某几列生效？用 data-field 精准控制
如果只要「操作」列加粗居中，其余列保持默认，不要用 :nth-child()（列序易变），改用 Layui 渲染后自动添加的 data-field 属性：
- 确认列定义里
field值，比如{field: 'operate', title: '操作'} - 写 CSS 时严格匹配大小写：
.layui-table thead th[data-field="operate"] - 仍需加
!important，否则会被 Layui 内部.layui-table th的默认font-weight覆盖
示例：
.layui-table thead th[data-field="operate"] {
padding: 12px 15px !important;
text-align: center !important;
font-weight: 700 !important;
}
IE11 或动态重载后样式丢失？检查这三点
这不是偶然，而是 Layui 表头重绘机制和旧浏览器限制共同导致的典型问题：
- 表格调用
table.reload()或table.resize()后，部分内联样式会重置，但 class 和外部 CSS 不会丢——所以别把样式写进templet或style字段 - IE11 不支持
flex布局下的align-items，也对table-cell的vertical-align解析异常，此时padding是唯一稳定方案 - 如果你的表格容器套了
transform或will-change，会触发硬件加速，导致th的渲染层分离，padding值可能被缩放干扰——临时去掉这些 CSS 可验证是否为根因
最常被忽略的是：改完 CSS 后没清浏览器缓存，或者构建工具把 layui.css 和你的样式打包进了同一个 chunk 但顺序反了。上线前务必用开发者工具的 Computed 标签页，看最终生效的 padding 和 font-weight 值从哪来。
