我将使用一个div来居中对齐图像。如:

<div align="center"><img src="your_image_source"/></div>

不是recommendad:

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

更新:

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

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

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

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

我建议有三种方法来居中一个元素:

Using the text-align property .parent { text-align: center; } <div class="parent"> <img src="https://placehold.it/60/60" /> </div> Using the margin property img { display: block; margin: 0 auto; } <img src="https://placehold.it/60/60" /> Using the position property img { display: block; position: relative; left: -50%; } .parent { position: absolute; left: 50%; } <div class="parent"> <img src="https://placehold.it/60/60" /> </div>

第一种和第二种方法只在父元素至少和图像一样宽的情况下才有效。当图像比其父图像宽时，图像将不会保持居中!!

但是: 第三种方法是一个很好的方法!

这里有一个例子:

img { 显示:块; 位置:相对; 左:-50%; ｝ .parent { 位置:绝对的; 左:50%; ｝ < div class = "父" > <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" /> < / div >

如果你想将图像设置为背景，我有一个解决方案:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

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

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