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

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 >

(纵横对齐)

你可以在父元素上使用text-align: center，并将img更改为display: inline-block→，因此它的行为就像一个文本元素，如果父元素有宽度，它将居中!

img {
    display: inline-block
}

如果您希望将图像垂直和水平地居中，而不考虑屏幕大小，您可以尝试此代码

img{
   display: flex;
   justify-content:center;
   align-items: center;
   height: 100vh;
}

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

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

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

实际上，代码的唯一问题是text-align属性应用于标记内的文本(是的，图像也算作文本)。你会想在图像周围放置一个span标签，并将其样式设置为text-align: center，如下所示:

跨度。centerImage { text-align:中心; ｝ <span class="centerImage"><img src="http://placehold. "它/ 60/60 " / > < / span >

图像将居中。对于您的问题，这是最简单、最简单的居中图像的方法，只要您记得将该规则应用于图像的包含span(或div)。

除非你需要支持旧版的ie浏览器。

现代的方法是在CSS中使用margin: 0 auto。

例如:http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

这里唯一的问题是，段落的宽度必须与图像的宽度相同。如果你没有在段落上设置宽度，它将不起作用，因为它将假设100%并且你的图像将向左对齐，当然除非你使用text-align:center。

如果你喜欢，可以试试这把小提琴。