本文介绍在 moodle 等受限 lms 环境中，仅允许使用内联 css 的前提下，如何将文本与表格等元素整体垂直居中对齐——核心方案是利用 `display: flex` 配合 `align-items: center`，无需外部样式表或 javascript。
在 Moodle 试题编辑器等轻量级 HTML 输入框中，开发者通常无法引入
推荐采用现代、简洁且兼容性良好的 Flexbox 方案：将包含文本和表格的父容器设为 display: flex，并启用 align-items: center 实现子元素的垂直居中。该方法语义清晰、代码精简，且所有样式均通过 style 属性内联定义，完全满足 Moodle 的限制要求。
以下为可直接复制使用的完整示例代码：
A =
1 2 3 4 5 6 7 8 9 = A
✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局，使子元素（
和
）成为弹性项目；
- align-items: center 确保所有子元素在其交叉轴（即垂直方向）上居中对齐；
- gap: 12px（可选）替代 margin 控制元素间距，更简洁可靠；
- 移除 float 及其副作用，避免额外清除操作；
- 为
和
显式设置 margin: 0，防止浏览器默认外边距干扰对齐效果；
- 表格添加 border-collapse: collapse 提升视觉整洁度（非必需，但推荐）。
⚠️ 注意事项：
- Moodle 使用的富文本编辑器（如 Atto）可能自动过滤部分 CSS 属性。若 display: flex 未生效，请确认 Moodle 版本 ≥ 3.5（Flexbox 支持自 Chrome 29 / Firefox 20 起已广泛可用）；
- 避免使用 height: 100vh（如原答案所示），因其强制拉伸容器至视口高度，在试题页面中易导致布局异常或滚动条干扰；应依赖内容自然高度 + align-items: center 实现响应式居中；
- 若需兼容极老旧环境（不推荐），可退化为 vertical-align: middle + display: inline-block 方案，但对多行文本或复杂结构支持较差，Flexbox 是当前最优解。
综上，在 Moodle 试题中实现文本与表格的垂直居中，只需一个启用了 Flex 布局的
容器，配合几行内联样式即可稳健达成目标——简洁、标准、可维护。
