使用网格来堆叠图像。这很简单，这是代码

.grid {
   display:grid;
}

.grid img {
    display:block;
    margin:0 auto;
}

简单地改变父对齐:)

在父属性上试试这个:

text-align:center

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

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 >

使用网格来堆叠图像。这很简单，这是代码

.grid {
   display:grid;
}

.grid img {
    display:block;
    margin:0 auto;
}

不是recommendad:

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

更新:

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

使用这个到你的img CSS:

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