最直接有效的方案是display: grid + place-items: center配合height: 100vh，一行代码实现视口级水平垂直居中，不依赖图片尺寸，现代浏览器兼容良好。
图片要真正居中于屏幕正中央（即视口中心），必须同时满足水平和垂直两个方向的居中，且不依赖图片尺寸。最直接有效的方案是用 display: grid + place-items: center，但前提是父容器高度为 100vh —— 这个组合在现代浏览器里一行 CSS 就能搞定，不用算偏移、不担心宽高未知、也不用改 <img> 自身样式。
用 place-items: center 实现视口级居中
这是目前语义最清晰、代码最简的方案，适合现代项目（Chrome/Firefox/Safari/Edge ≥ 2022）。它本质是把父容器当作一个单格网格，让子元素在该格内自动居中。
- 必须作用在父容器上，不是
<img>标签自己 - 父容器需设
height: 100vh（或明确高度），否则“垂直”无参照，图片会贴顶 -
place-items: center等价于justify-content: center+align-items: center，同时控制两个轴 - 兼容性良好，但不支持 IE；若需兼容老浏览器，请跳过此方案
示例：
<div style="display: grid; place-items: center; height: 100vh;"> <img src="logo.png" alt="logo"> </div>
用 flex 布局实现居中（兼容性更广）
Flex 方案比 Grid 兼容性稍好（IE10+ 支持），逻辑也更直观：把父容器变成弹性盒子，再让子项在主轴和交叉轴都居中。
- 父容器必须设
height: 100vh或具体高度值，否则align-items: center无效（容器塌缩后没空间可居中） -
<img>无需改display，无论它是 inline 还是 block 都能被 flex 正确处理 - 避免把
display: flex直接加在上——它会让所有直系子元素（比如多个<p></p>）都变成 flex item，布局易失控 - 如果父容器已有其他 flex 相关样式（如
flex-direction: column），需确认是否影响对齐方向
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="logo.png" alt="logo"> </div>
为什么 text-align: center 和 margin: 0 auto 不行？
这两个方法只能解决水平居中，对垂直方向完全无效。它们常被误用于“屏幕居中”场景，结果图片卡在顶部中间——看起来像居中，实则只是水平对齐了。
-
text-align: center只作用于父容器内的行内内容，且只控制水平方向；写在<img>上完全无效 -
margin: 0 auto要求元素是块级、有明确宽度、父容器不能是flex或grid；即使满足，它也不会动 vertical margin - 常见错误：给
加text-align: center，结果整页文字都居中，而图片仍贴顶
绝对定位 + transform 是备选，但容易漏关键点
当必须支持极老浏览器（如 IE9），或需要脱离文档流时，这个方案仍有效。但它对父容器约束更强，稍不注意就失效。
- 父容器必须设
position: relative（或其他非static值），否则top: 50%会相对于视口计算 -
top: 50%; left: 50%移动的是元素左上角，必须配transform: translate(-50%, -50%)回拉自身尺寸的一半 - 如果图片宽高未加载完成（比如懒加载），
transform仍能生效——这点比依赖尺寸的负 margin 更可靠 - 别忘了设
width和height（哪怕用max-width: 100%），否则可能溢出视口
示例：
<div style="position: relative; height: 100vh;"> <img src="logo.png" alt="logo" style="max-width:90%"> </div>
真正“居中于屏幕”的核心在于：垂直方向必须有参照高度（通常是 100vh），且对齐方式必须作用于二维空间。很多人卡在只处理了水平方向，或者忘了给父容器设高度——这两点比选哪种 CSS 方案更容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
