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

仅将高度和宽度应用于img，然后像这样添加align-items: center：

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

img {
 width: 100px;
 height: 100px;
}

<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>

Answer 2

您需要纠缠内部项目的尺寸。

可以使用/dev/sdc1和max-width相对于容器来控制图像。我添加了红色边框，以便您可以更轻松地看到容器。

此外，max-height元素默认带有大的h1和font-size，因此也需要为其设置值。

margin

.center-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* change text-align to align-items */
  border: 1px red solid; /* this is just so you can easily see the container */
}

.center-img img {
  max-width: 100%; /* dimensions relative to the container size */
  max-height: 40%; /* dimensions relative to the container size */
  height: auto; /* keep aspect ratio */
  width: auto; /* keep aspect ratio */
}

.center-img h1 {
  margin: 5px 0 0; /* h1 has default margin-top and margin-bottom */
  font-size: 18px; /* Set this to a reasonable size */
}

Answer 3

要考虑的几件事：

您从未居中图像。

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

众所周知，作为弹性项目的图像在不同的浏览器中都存在渲染问题。而是将图像包装在div中，并使div为flex项。
使具有弹性属性的嵌套容器内的图像对齐。

使用嵌套的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>

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

3 个答案: