stubimg类图片的CSS定位属性top、left等不生效问题求助

问题原因及修复方案 #

1. HTML类属性语法错误 #

你当前的图片标签写法为：

<img class "stubimg" src="https://stub.w3spaces.com/Stub_Tree.png" width="230px" height="230px">

class和属性值stubimg之间漏掉了等于号，导致浏览器无法识别该元素需要应用.stubimg对应的样式，这是样式不生效的核心原因。
正确写法为：

<img class="stubimg" src="https://stub.w3spaces.com/Stub_Tree.png" width="230px" height="230px">

2. CSS属性冗余/无效 #

你给绝对定位的.stubimg设置了text-align、align-items、align-self、align-content属性，这些属性对单独的绝对定位元素本身无效，无法实现你想要的水平居中效果。如果需要让图片水平居中，修改.stubimg规则如下即可：

.stubimg {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
}

修改完成后top、left等定位属性即可正常生效，也能实现图片的水平居中效果。

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