HTML如何居中图片？

在HTML中让文本和图片居中显示主要通过CSS实现，以下是详细方法及代码示例,适用于不同场景：

文本居中

水平居中

<!-- 行内元素（如span/a） -->
<p style="text-align: center;">居中文本</p>
<!-- 块级元素（如div/p） -->
<div style="width: 300px; margin: 0 auto;">块级元素居中</div>

垂直居中

<!-- 单行文本 -->
<div style="height: 100px; line-height: 100px;">垂直居中文本</div>
<!-- 多行文本 -->
<div style="
  height: 200px;
  display: flex;
  align-items: center;
">
  多行文本内容<br>第二行文本
</div>

图片居中

水平居中

<!-- 行内图片 -->
<div style="text-align: center;">
  <img src="image.jpg" alt="示例图片">
</div>
<!-- 块级图片 -->
<img src="image.jpg" style="display: block; margin: 0 auto;">

垂直居中

<div style="
  height: 300px;
  display: flex;
  align-items: center;
">
  <img src="image.jpg" alt="垂直居中图片">
</div>

文本+图片同时居中

<div style="
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
">
  <h2>标题居中</h2>
  <p>描述文本居中显示</p>
  <img src="image.jpg" alt="组合居中">
</div>

响应式居中技巧

.container {
  display: grid;
  place-items: center; /* 同时水平垂直居中 */
  min-height: 100vh; /* 全屏高度 */
}

专业建议

1. 优先使用Flexbox/Grid布局：现代浏览器支持良好，代码简洁
2. 移动端适配：添加媒体查询确保不同设备居中效果一致
3. 语义化HTML：结合<figure>和<figcaption>标签提升可访问性

   <figure style="text-align: center;">
   <img src="image.jpg" alt="带描述的图片">
   <figcaption>图片说明文字</figcaption>
   </figure>

注意事项

• 避免使用已废弃的<center>
• 图片始终添加alt属性
• 复杂布局建议使用外部CSS文件
• 测试不同浏览器兼容性（特别是IE11需要-ms前缀）