【问题标题】：Having trouble centering an image in CSS无法在 CSS 中居中图像
【发布时间】：2016-06-08 23:19:09
【问题描述】：

我试图在 div 中水平居中图像。然而，我一直没能。我尝试将垂直对齐设置为中间，将边距设置为自动、0 自动以及我能想到的所有变化。没有任何效果。以下是当前设置的代码：

img {
border: 0;
margin: 0 auto;
}

.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}

图片在介绍 div 中。您可以提供的任何建议都会有所帮助。

【问题讨论】：

How to center images on a web page for all screen sizes的可能重复
你的意思是垂直居中吗？
如果您实际上是在尝试将其水平居中，那么您已经接近了。您只需要为图像添加宽度，margin: 0 auto; 即可工作。
我的意思是水平居中。我只是没有找到任何适用于任何先前创建的标签的解决方案。我确实在 Youka 发布的链接中找到了解决方案，非常感谢！

标签： html css alignment vertical-alignment centering

【解决方案1】：

如果您想将图像水平和垂直居中，这应该可以解决问题：

 .intro {
    display: table;
    width: 500px; /* works with any width */
    height: 150px; /* works with any height */
    background: #ccc;
}

.imgcontainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
}

<div class="intro">
   <div class="imgcontainer">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>

【讨论】：

【解决方案2】：

在父级.intro 中使用position:relative 并在img 中使用下面显示的代码，它将适用于任何width 和height

  display:block;
  margin:auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0

片段

.intro {
  border: dashed red; /* demo */
  display:inline-block; /* demo */
  vertical-align:top; /* demo */
  position: relative
}
.intro img {
  border-radius: 50%;
  vertical-align: middle;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.intro:first-of-type {
  width: 200px;
  height: 200px;
}
.intro:last-of-type {
  width: 400px;
  height: 300px;
}

<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>
<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>

【讨论】：

【解决方案3】：

margin: 0 auto; 的 css 样式应该可以解决水平部分的问题。对于垂直部分，您还需要照顾父母。更多信息请查看How to vertically align an image inside div。

【讨论】：

【解决方案4】：

vertical-align 仅适用于表格单元格。尝试使用Flexbox。包含图片的元素应该具有 CSS 属性：

display: flex;
align-items: center;

【讨论】：

你错了，'vertical-align' 适用于 内联级和表格单元格元素。它也适用于::first-letter 和::first-line。 vertical-align in MDN
所以毕竟不是完全错误:) 无论如何，不会像他那样工作。