HTML图片居中显示

在HTML中，让图片居中显示通常有两种常见的方法：

1. **使用CSS**：
- 内联样式：直接给`<img>`标签添加`style`属性，设置`margin: 0 auto;`，这会使图片水平居中。例如：

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

- 类内样式：在外部CSS文件或`<style>`标签中定义一个`.center-img`类，然后将该类应用到图片上：

     <img class="center-img" src="image.jpg" alt="图片">

CSS:

     .center-img {
       display: block;
       margin: 0 auto;
     }

2. **使用Flexbox布局**：
如果你想要更现代的做法，可以利用CSS的Flexbox布局，将包含图片的容器设为`display: flex; justify-content: center;`：

     <div class="container">
       <img src="image.jpg" alt="图片">
     </div>

CSS:

     .container {
       display: flex;
       justify-content: center;
       align-items: center;
     }