html中如何让图片居中

在HTML中让图片居中有几种常见方法：

1. **内联样式**：
使用`style="margin: 0 auto;"`，这会设置图片上下的外边距为auto，使其左右自动对齐达到居中效果。例如：

   <img src="image.jpg" style="display: block; margin: 0 auto;">

2. **外联样式表（CSS）**：
将图片放入一个容器，并为其设置`text-align: center`，然后给图片添加`display: block`使其成为块级元素以便响应布局。示例：

   <div class="container">
     <img src="image.jpg" alt="图片描述" class="center-img">
   </div>
   CSS:
   .center-img {
     display: block;
     margin: 0 auto;
   }

3. **Flexbox** 或 **Grid** 布局：
如果使用现代浏览器，可以利用CSS的flex或grid布局来轻松实现：

   <div class="parent">
     <img src="image.jpg" class="centered-image">
   </div>
   CSS:
   .parent {
     display: flex;
     justify-content: center;
   }
   .centered-image {
     max-width: 100%;
   }