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

<div align="center"><img src="your_image_source"/></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;
}

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

.grid {
   display:grid;
}

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

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

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

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 >

(纵横对齐)

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

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 >