富文本中图片不居中需直接对img设display:block和margin:0 auto并加!important覆盖内联样式，而非依赖父容器text-align。
富文本里图片不居中，不是加个 text-align: center 就能解决的——因为富文本内容通常由后端或编辑器直接注入，你无法控制每张图的父容器结构，也不能保证它被包在有样式的 <div> 里。
富文本渲染后图片没父容器包裹，text-align 失效
很多富文本（如 TinyMCE、Quill、或者 CMS 导出的 HTML）会直接输出 <p><img src="..."></p> 或更糟：<img src="..."> 孤立存在。此时：
-
text-align: center必须写在**父块级容器**上，而孤立<img>的父元素可能是<body>或一个没设样式的<div>，根本不起作用 - 如果富文本内容被塞进一个
contenteditable区域或<div>，但该容器本身没设text-align，那所有子<img>都按默认左对齐 - 哪怕你给整个富文本容器加了
text-align: center，一旦里面混了<div>、<table>等块级子元素，它们依然靠左，破坏整体视觉居中
用 CSS 选择器精准匹配富文本中的 <img> 并强制居中
最可靠的方式是绕过“依赖父容器”，直接对图片自身施加块级行为 + 自动外边距。但要注意：必须覆盖富文本自带的内联样式（比如编辑器可能给图加了 style="float: left"）。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.rich-text img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
height: auto !important;
}
关键点：
-
display: block是前提，否则margin: auto对行内元素无效 -
!important是必须的——富文本常带内联style，不加它容易被覆盖 -
max-width: 100%防止大图撑破容器；height: auto保比例，避免拉伸 - 此方案只管水平居中；若需垂直居中（比如单图占满视口），得额外给容器设
min-height并用 flex
遇到 float、vertical-align 或内联 style 干扰怎么办
富文本编辑器（尤其老版本）喜欢给图片加 float: left 或 vertical-align: top，这会让 margin: auto 完全失效。
应对策略：
- 重置浮动：
float: none !important - 清除对齐干扰：
vertical-align: initial !important - 禁用旧式对齐属性：
clear: both !important - 如果富文本用了
style="display: inline"这类硬编码，display: block !important能覆盖它
完整兜底规则示例：
.rich-text img {
display: block !important;
margin: 0 auto !important;
float: none !important;
clear: both !important;
vertical-align: initial !important;
max-width: 100% !important;
height: auto !important;
}
响应式场景下图片居中错位或溢出
富文本图片在小屏上容易因宽高比失衡而换行、挤压文字，或被截断。这不是居中逻辑错了，而是布局没预留空间。
真正要补的细节：
- 给富文本容器设
overflow-x: hidden，防宽图横向滚动 - 对窄容器里的图，加
width: 100%替代max-width（但仅当确定不会变形时） - 如果图下方有文字，且出现“图居中、字左对齐”的割裂感，统一给
.rich-text > *加text-align: center，但注意避开<table>等不该居中的块级元素 - 加载延迟导致闪动？给
img设固定aspect-ratio或最小height，防止 flex 容器塌陷
富文本的“自动居中”从来不是一劳永逸的事——它本质是和编辑器输出习惯、CSS 层叠优先级、以及响应式断点之间的持续博弈。最稳的解法，永远是用强优先级规则直接作用于 img 元素本身，并把常见干扰项列进重置清单。
