css中如何将引用的图片水平居中

在CSS中，要将引用的图片水平居中，可以使用以下几种方法：

1. **内联样式**:
对于单张图片，可以直接在其`<img>`标签内设置样式，例如:

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

这里使用了`display: block;`让图片成为块级元素，然后通过`margin: 0 auto;`使其左右外边距自动对齐，实现了水平居中。

2. **外链样式**:
如果你想将这个样式应用到所有图片上，可以在CSS文件中选择`.image-class`或直接使用`:before`或`:after`伪元素：

   .centered-image {
     display: flex;
     justify-content: center;
   }
   
   img {
     max-width: 100%;
     height: auto;
   }

或者

   img:before {
     content: "";
     display: inline-block;
     width: 100%;
     height: 0;
     vertical-align: middle;
   }
   img {
     vertical-align: middle;
   }

3. **Flexbox布局**:
如果页面支持Flexbox，也可以使用这种方法：

   .parent-container {
     display: flex;
     justify-content: center;
   }
   
   img {
     max-width: 100%;
   }

将图片放入一个拥有`display: flex;`属性的容器中，会使其子元素自然水平居中。

记得根据实际需求调整样式，并确保图片的最大宽度不超过其容器尺寸，以免超出范围。