图片水平居中最快用父容器text-align:center，但需确保父容器有宽度且无float等干扰；margin:0 auto需搭配display:block；垂直居中必须用flex+高度；响应式对齐应切换父容器属性而非重复定义图片样式。
给父容器设 text-align: center 最快生效
图片默认是行内元素，text-align: center 必须写在它的父容器（比如 <div>）上才起作用。直接加在 <img> 标签里完全无效。
常见翻车点：
- 父容器没设宽度，或被
float、display: inline-block拉偏，导致“居中了但看不见效果” - 父容器里混了
<div>这类块级子元素，它们不受text-align影响，会继续左对齐 - 用了古腾堡区块但图片没套在
wp-block-image容器里，Zakra 等主题的默认居中规则就匹配不上
稳妥写法：
<div style="text-align: center;"> <img src="photo.jpg" alt="photo"> </div>
用 margin: 0 auto 居中时必须配 display: block
想让单张图片独占一行并水平居中？margin: 0 auto 是最通用的方案，但漏掉 display: block 就等于白写——因为 margin: auto 对行内元素无效。
还要注意三点：
立即学习“前端免费学习笔记（深入）”；
- 如果图片用了
max-width: 100%（响应式必需），就不能再设固定width，否则会冲突；此时margin: 0 auto依然有效，前提是它已是块级 - 父容器不能是
flex或grid布局，否则外边距会被容器的对齐逻辑接管 - 这个方法只管水平方向，垂直方向仍贴顶，别指望它自动垂直居中
正确写法：
<img src="logo.svg" alt="logo" style="display: block; margin: 0 auto; max-width: 100%; height: auto;">
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
需要水平+垂直居中？父容器必须用 flex 并设高度
单纯靠 text-align 或 margin 都做不到垂直居中。display: flex 是现代项目里最可控的选择，但必须同时满足两个条件：父容器设 justify-content: center 和 align-items: center，且容器本身有可参考的高度。
典型失效场景：
- 父容器高度塌陷（比如没内容、没设
min-height或height），align-items: center就没空间可居中，图片只会水平居中、垂直贴顶 - 直接在
<body>上加display: flex，会把所有直系子元素都变成 flex item，破坏原有文档流 - 旧 Android（4.4 及以下）需补
-webkit-justify-content等前缀
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"> <img src="icon.png" alt="icon" style="max-width: 100%; height: auto;"> </div>
响应式对齐切换别重写图片尺寸，改父容器的 text-align 或 justify-content
小屏居中、中屏左对齐、大屏右对齐——这种需求不需要每个断点都重复定义 img { width: 100% }，那只是浪费 CSS 体积。关键是在媒体查询里切换父容器的对齐行为。
错误思路：每个断点都写一遍图片样式，甚至加 !important 强制覆盖
正确做法：
- 用
text-align方案时，在媒体查询里改父容器的text-align值即可 - 用
flex方案时，替换justify-content的值（center/flex-start/flex-end） - 确保父容器的
display和对齐属性能被媒体查询正常接管，别被更高优先级规则锁死
比如：
@media (max-width: 768px) {
.img-container { text-align: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.img-container { text-align: left; }
}
@media (min-width: 1025px) {
.img-container { text-align: right; }
}
真正容易被忽略的是：图片是否真的“适合居中”。如果原图宽 2000px，而容器在手机上只有 375px 宽，max-width: 100% 能防止溢出，但居中的仍是那张被压缩得看不清细节的图——上传前限制最大宽度（建议 ≤1200px）比任何 CSS 技巧都管用。
