本文详解如何通过 CSS Flexbox 正确实现 Thymeleaf 渲染图片的水平居中，指出仅设置 justify-content 无效的根本原因，并提供可直接运行的完整解决方案。
本文详解如何通过 css flexbox 正确实现 thymeleaf 渲染图片的水平居中，指出仅设置 `justify-content` 无效的根本原因，并提供可直接运行的完整解决方案。
在 Thymeleaf 模板中，仅给 <img> 元素添加 justify-content: center（如原 CSS 中 .logo 类所做）完全无效——因为 justify-content 是 Flex 容器（flex container）的属性，而非子元素（flex item）的样式。图片本身不是容器，无法通过自身样式触发 flex 布局行为。要实现居中，必须让图片的父容器成为 flex 容器，并在其上配置对齐逻辑。
✅ 正确做法：将父容器设为 Flex 容器
修改 HTML 结构，为 <img> 添加一个包裹 <div>（或直接作用于 <header>），并为其启用 display: flex：
<header style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
<img th:src="@{/images/137364472_padded_logo.png}"
alt="mystic-planets"
class="logo" />
</header>同时更新 CSS，移除 .logo 中无效的 justify-content，专注控制尺寸与显示：
/* Global styles */
body {
background-color: #364f6b;
margin: 0;
padding: 0;
}
/* Logo styling — only size & appearance */
.logo {
width: 400px;
height: auto;
max-width: 90vw; /* 响应式保护 */
}
/* Optional: if using <header> as flex container, avoid inline style */
header {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}? 关键说明：
- justify-content: center → 水平居中子元素（即图片）
- align-items: center → 垂直居中（常需配合 min-height: 100vh 实现视口级居中）
- display: flex 必须作用于父容器，否则 justify-content 不生效
- justify-items 在 flex 布局中不适用（它是 Grid 布局属性），原文答案中提及属概念混淆，应忽略
⚠️ 注意事项与最佳实践
- ❌ 不要给 <img> 自身加 display: flex 或 justify-content —— 它不是容器；
- ✅ 推荐将 flex 样式写在 CSS 文件中（如 header { ... }），而非内联 style，便于复用与维护；
- ? 添加 max-width: 90vw 和 height: auto 可确保图片在小屏设备上自适应缩放，避免溢出；
- ? 若需兼容旧浏览器（IE10+），可补充 -webkit-box 等前缀，但现代项目通常无需；
- ? 替代方案：也可使用 text-align: center + display: block（适用于单图），但 Flex 更健壮、可控性更强。
✅ 最终验证效果
渲染后，图片将严格水平（且垂直）居中于页面中央，无论窗口尺寸如何变化，均保持响应式居中行为。这是 Thymeleaf 与现代 CSS 协同工作的标准范式——模板负责结构与动态资源注入（th:src），CSS 负责布局与表现，职责清晰，可维护性强。
