如果你正在使用一个带有图像的类，那么下面的步骤就可以了

class {
    display: block;
    margin: 0 auto;
}

如果它只是一个图像在一个特定的类，你想居中对齐，那么下面将做:

class img {
    display: block;
    margin: 0 auto;
}

如果你的img元素在一个div中，它本身在另一个div中，它的显示被设置为flexbox，就像我这里的例子: (HTML)

<nav class="header">
            <div class="image">
                <img
                src=troll
                alt="trollface"
                ></img>
            </div>
            <div class="title">
                Meme Generator
            </div>
            <div class="subtitle">
                React Course - Project 3
            </div>
        </nav>

(CSS)

.header{
    display: flex;
}

.image{
    width: 5%;
    height: 100%;
}

.image > img{
    width: 100%;
}

你可以这样设置你的。image div垂直对齐:

.image{
    width: 5%;
    height: 100%;
    align-self: center;
}

用CSS将图像居中。

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

你可以在这里了解更多

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

img {
    display: inline-block
}

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

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

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

不是recommendad:

另一种方法是将一个封闭段落居中: <p style="text-align:center"><img src="https://via.placeholder.com/300"></p> .

更新:

如果你想开始学习HTML/CSS，我上面的答案是正确的，但它没有遵循最佳实践