定义宽度和高度后，Flex 容器中的图像未居中

Question

我正在使用 css flex box 制作一些个人作品集。我想做的是将图像水平居中，它确实居中，但问题是在我width定义height之后img开始处或左侧，现在不在中心。

width这就是居中且未定义和时的样子height

.center-img{
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
  <h1>User</h1>
</div>

width这就是定义和之后的样子height

.center-img{
  width:100px;
  height:100px;
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
  <h1>User</h1>
</div>

我希望定义图像的width和后height不会影响图像的位置。所以它应该在中心。谢谢你！

Answer 1

需要考虑的几件事：

1. 你从来没有使图像居中。

   在您的第一个代码示例中，图像占据了整个视口宽度，因此它只是居中显示。width当您使用和缩小图像尺寸时height，它会按照默认值向左对齐。用于align-items在列方向容器中水平居中弹性项目。

2. 不要使用图像作为弹性项目。有很多错误。

   众所周知，作为弹性项目的图像在不同浏览器上存在渲染问题。相反，将图像包装在 div 中，并使 div 成为弹性项目。

3. 将嵌套容器内的图像与 flex 属性对齐。

   使用嵌套的弹性容器使图像居中。

.center-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightgray;
}

.center-img > div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  border: 1px dashed red;
  
}

.center-img > div > img {
  width: 100%;
}

h1 {
  margin: 0;
}

<div class="center-img">
  <div>
    <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"
      alt="user">
  </div>
  <h1>User</h1>
</div>