align-content 对 <table> 无效，因其仅适用于 Flexbox/Grid 布局，而表格使用 table box 模型；电子病历中应坚持语义化表格，用 text-align、vertical-align、table-layout: fixed 等原生属性实现合规对齐。
align-content 在 HTML 表格中完全无效，无论你写多少次、加多少层 !important，它都不会影响 <table> 的任何行为——这不是兼容性问题，是根本不在作用域内。
为什么 align-content 对 <table> 无反应
表格元素（<table>、<tr>、<td>）默认使用 table box 布局模型，而 align-content 是 Flexbox 和 Grid 的交叉轴对齐属性，只在 display: flex 或 display: grid 容器中生效。浏览器会直接忽略该声明，开发者工具里也查不到 computed 值。
常见错误现象：<table style="align-content: center"> 写了但毫无变化；给 <tr> 加 display: flex 后，语义丢失、打印样式错乱、<colgroup> 失效、屏幕阅读器无法识别行/列关系——这在电子病历场景中尤其危险，可能影响临床决策信息的可访问性。
医疗电子病历中表格内容对齐的硬性要求
电子病历系统（如基于 SpringBoot + 原生 HTML 的模板引擎）对表格对齐有明确业务约束：体温单需数字右对齐、诊断描述需多行文本垂直居中、量表选项需水平居中且行高一致、打印输出必须保持列宽与跨页对齐稳定。
立即学习“前端免费学习笔记（深入）”；
-
text-align: right用于数值型字段（如血压、血糖、心率），避免小数点错位 -
vertical-align: middle必须作用于<td>，而非<tr>—— 因为每行单元格高度可能不同（如合并单元格或含图片的体征记录） - 禁止用
align或valign属性：T-SQL 动态拼接 HTML 时容易遗漏引号或大小写，且不支持响应式缩放 - 固定列宽优先用
width配合table-layout: fixed，防止病程记录中长文本撑开整列，破坏左右对照结构
整张表格在页面中居中且垂直居中的实操方案
电子病历常需将单张量表（如 HAMD 24 项）居中显示在模态框或打印预览区，不能靠 JS 计算偏移，必须纯 CSS 可靠实现：
- 水平居中：给
<table>设margin: 0 auto+ 明确width（如width: 85%或width: 720px），禁用width: 100%（否则失去居中意义） - 垂直居中：必须在外层容器上设
display: flex; align-items: center; justify-content: center; min-height: 100vh，不能依赖vertical-align（它只对 inline 元素有效） - 若嵌入 Bootstrap 模态框，需额外加
.modal-dialog-centered类，并确保父级.modal-body未设overflow: hidden截断内容 - 打印时失效？检查是否用了
@media print { ... }覆盖了 flex 样式——应单独定义@media print { .center-container { display: block; text-align: center; } }
多行内容“整体垂直居中”的替代解法
所谓“让三行 <td> 在表格内统一上下居中”，原生表格没有这个能力。强行用 line-height 匹配行高会破坏多行文本换行逻辑，尤其在护理记录中出现换行符时。
真正可行且合规的做法只有两个：
- 用
vertical-align: middle+height+padding组合控制单个<td>的视觉居中（适用于固定行高场景，如标准量表） - 彻底放弃
<table>，改用display: grid模拟表格结构：设置grid-template-columns和grid-auto-rows: minmax(40px, auto)，再用align-content: center控制多行子项——但必须重写语义，用role="table"、role="row"、role="cell"补全可访问性
最后提醒：电子病历系统里，<table> 的语义不是“画格子”，而是“表达行列间临床数据的强关联”。对齐只是表象，结构正确性和可访问性才是底线。别为了视觉整齐，把一张血压记录表变成不可读的 div 网格。
