我发现，如果我在一个div中有一个图像和一些文本，那么我可以使用text-align:center一次性对齐文本和图像。

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

.img-container {
  display: flex;
}

img {
  margin: auto;
}

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

有时我们直接在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: flex;
   justify-content:center;
   align-items: center;
   height: 100vh;
}

另一种缩放方法-显示它:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

这将不起作用，因为text-align属性适用于块容器，而不是内联元素，而img是一个内联元素。请参阅W3C规范。

用这个代替:

img。中心{ 显示:块; 保证金:0自动; ｝ < span style=" font - family:宋体;"> <img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> < / div >