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

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

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

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

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

除非你需要支持旧版的ie浏览器。

现代的方法是在CSS中使用margin: 0 auto。

例如:http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

这里唯一的问题是，段落的宽度必须与图像的宽度相同。如果你没有在段落上设置宽度，它将不起作用，因为它将假设100%并且你的图像将向左对齐，当然除非你使用text-align:center。

如果你喜欢，可以试试这把小提琴。

.img-container {
  display: flex;
}

img {
  margin: auto;
}

这将使图像在垂直和水平方向上处于中心位置

边框为0的Display: block和text-align: center元素都不适合我。

这是我的解决方案:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

大多数浏览器都支持translateX

有时我们直接在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;
}

这并不总是奏效……如果没有，试试:

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