如何将img元素定位到指定位置？我尝试居中设置未生效

你的现有代码已经实现了水平居中，但要让图片在整个网站页面中间（包含垂直方向），bottom属性单独生效需要配合定位规则，以下是几种可靠的实现方式：

方法一：Flexbox布局（推荐） #

给图片的父容器（或直接给<body>）设置flex属性，快速实现双方向居中：

CSS代码：

body {
  margin: 0;
  min-height: 100vh; /* 让body占满视口高度 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

img {
  border-radius: 50%;
  width: 128px;
}

对应的HTML（补全必要结构）：

<html>
<body>
  <div class="logo">
    <img src="assets/img/logo-icon.png" alt="Avatar">
  </div>
</body>
</html>

方法二：Grid布局 #

用Grid实现双方向居中更简洁：

CSS代码：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
}

img {
  border-radius: 50%;
  width: 128px;
}

方法三：绝对定位+transform #

如果需要兼容旧浏览器，可以用这种方法，注意给父元素设置相对定位作为上下文：

CSS代码：

body {
  margin: 0;
  min-height: 100vh;
  position: relative; /* 作为图片定位的参照容器 */
}

img {
  border-radius: 50%;
  width: 128px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 偏移自身宽高的一半实现精准居中 */
}

为什么你的bottom属性没生效？ #

bottom属于定位属性，只有当元素设置了position: absolute/relative/fixed/sticky时才会生效，且需要配合top/left等其他定位属性，同时依赖父元素的定位上下文才能达到预期效果，单独设置bottom无法实现垂直居中。

内容的提问来源于stack exchange，提问作者FastDropGaming