3. 方法详解与代码示例
3.1 使用 text-align: center;
适用于图片作为内联元素的情况，通过设置父容器的文本对齐方式为居中。
.parent {
text-align: center;
}
img {
display: inline-block;
}
优点是简单易用，适合批量处理；缺点是对块级元素无效，且不能控制垂直对齐。
3.2 Flexbox 布局方式
Flexbox 是现代布局的首选方案，适用于容器内多个元素的对齐。
.container {
display: flex;
justify-content: center;
align-items: center;
}
此方法适用于图片容器为块级元素的情况，能够实现水平与垂直居中，适用于响应式设计。
3.3 Grid 布局方式
CSS Grid 提供了二维布局能力，适用于复杂结构。
.grid-container {
display: grid;
place-items: center;
}
该方法适合需要在二维空间中居中的场景，尤其在图片与其他元素组合时更具优势。
3.4 Margin 自动计算方式
适用于单个图片居中，需设置宽度并使用 margin: 0 auto;。
img {
display: block;
width: 200px;
margin: 0 auto;
}
该方法在固定宽度场景中非常有效，但批量处理时不够灵活。