我看到了这个帖子，它对我很有用:

img { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < span style=" font - family:宋体;"位置:相对;最小高度:200 px”> < img src = " https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a " > < / div >

(纵横对齐)

我找到的最简单的解决方案是添加到我的img-element:

style="display:block;margin:auto;"

看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法，但对于我的目的来说，没有“0”也足够了。至少在最新的Firefox、Chrome和Edge上是这样。

我看到了这个帖子，它对我很有用:

img { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < span style=" font - family:宋体;"位置:相对;最小高度:200 px”> < img src = " https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a " > < / div >

(纵横对齐)

有时我们直接在WordPress管理员的页面中添加内容和图像。当我们将图像插入到内容中并想要对齐该中心时。代码显示为:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

在这种情况下，你可以像这样添加CSS内容:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

我发现，如果我在一个div中有一个图像和一些文本，那么我可以使用text-align:center一次性对齐文本和图像。

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

使用这个到你的img CSS:

img {
  margin-right: auto;
  margin-left: auto;
}