CSS图片位置不是我想要的

Question

我试图把我的图像放在盒子的中间顶部。如果这是一个愚蠢的问题，我很抱歉，但我是编码新手，而且我还年轻。我搜索了一下代码，除了这一部分，一切都很好。这让我的图像像中间偏左，这不是我想要的。感谢

.profile img
{
position: absolute!important;
left:calc(50% - 60%px)!important;
border: 10px solid #fff!important;
}

这就是它给我的

Answer 1

这也会有所帮助；

.profile{
position:relative; /* set whatever height and width to this div */
}
.profile img{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border: 10px solid #fff;
}

Answer 2

尝试使用Flexbox容器。使用对齐内容和对齐项，您应该能够在不使用绝对值的情况下将图像放在div的顶部中心。W3链接显示了这两个属性的示例——将它们组合起来，您应该可以获得所需的结果。

Answer 3

1. 使用margin:auto(通过将img标记设置为display:block(

div {background: yellow; height: 400px;}
img {border-radius:50%; margin:auto;display:block;}

<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>

2. 使用Flexbox

div {background: yellow; height: 400px; display: flex; justify-content:center;}
img {height: 100px; border-radius: 50%;}

<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>