图片在容器中的对齐主要靠css实现，常用方式包括：1. text-align:center使行内图片水平居中；2. margin:0 auto配合display:block实现块级图片水平居中；3. flex布局（justify-content:center和align-items:center）实现完全居中；4. object-fit控制图片缩放与填充方式。
图片在容器中的对齐方式，主要靠 CSS 控制，HTML 本身没有直接设置对齐的属性（align 属性已废弃）。下面几种常用、实用的方式，按不同场景分类说明：
用 text-align 水平居中（适用于行内元素）
当图片是行内元素（默认状态），且父容器是块级元素时，给父容器加 text-align: center 即可让图片水平居中：
<div style="text-align: center;"> <br> @@##@@<br> </div>
- 只影响**水平方向**，垂直方向不变（仍按基线对齐）
- 适合单张图、简单布局，无需额外包裹或定位
- 注意：如果父容器有其他行内内容，也会一起居中
用 margin: auto 水平居中（需设为块级）
把图片设为块级元素，再用自动外边距实现居中：
@@##@@
-
display: block是关键，否则margin: auto对行内元素无效 - 同样只控制水平居中；如需垂直居中，需配合父容器高度和
flex或position - 简洁可靠，兼容性好
用 Flexbox 实现完全居中（推荐现代布局）
父容器启用 Flex 布局，一行代码搞定水平+垂直居中：
<div style="display: flex; justify-content: center; align-items: center; height: 300px;"> <br> @@##@@<br> </div>
-
justify-content: center→ 水平居中 -
align-items: center→ 垂直居中（要求父容器有明确高度，或设min-height） - 支持多图排列、响应式，是目前最灵活的方式
用 object-fit 控制图片自身缩放与对齐（适配容器尺寸）
当图片要填满固定尺寸的容器（比如卡片、头像框），又不想拉伸变形，可用 object-fit：
<div style="width: 200px; height: 150px; border: 1px solid #ccc;"> <br> @@##@@<br> </div>
-
object-fit: cover→ 等比缩放并裁剪，填满容器（常用于封面图） -
object-fit: contain→ 等比缩放并完整显示（留白） -
object-position可微调对齐位置，例如object-position: top right
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
