你可以:

<中心> < img src = "…"/ > < /中心>

用CSS将图像居中。

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

你可以在这里了解更多

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

img {
    display: inline-block
}

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

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

图像将居中。对于您的问题，这是最简单、最简单的居中图像的方法，只要您记得将该规则应用于图像的包含span(或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;
}

在容器保存图像上，您可以使用css3 Flexbox来完美地将图像置于垂直和水平的中心。

让我们假设你有<div class="container">作为图像持有人:

然后作为CSS，你必须使用:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

这将使这个div中的所有内容完全居中。