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