如何在div内居中图片 不偏移line元素且让line紧贴方块顶部

问题根源 #

原有代码里的<img>处于正常文档流中，会占据60px的高度空间，把后方的.wrapper整体向下挤，直接导致.line无法贴到.square顶部；同时图片没有配置居中规则，默认靠容器左侧排列。

修改规则 #

• 给.square加position: relative，作为内部定位元素的偏移基准，同时重置容器默认内边距
• 给.image加position: absolute让它脱离正常文档流，彻底不占用普通流的布局空间，不会再挤压后续元素造成位置偏移，再通过偏移属性实现图片在容器内居中
• 重置.wrapper、.line的默认外边距，消除浏览器默认样式带来的顶部间距，让.line直接贴合.square顶部

完整代码 #

CSS #

.black {
  background: black;
}

.square {
  width: 200px;
  height: 500px;
  margin: 37px auto;
  border-radius: 2px;
  position: relative;
  padding: 0;
}

.image {
  height: 60px;
  width: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.line {
  width: 4px;
  height: 500px;
  background-color: red;
  margin: 0;
}

.wrapper {
  margin: 0;
  padding: 0;
}

HTML #

原有HTML结构无需改动，直接使用即可：

<div class="container">
    <div class="square black">  
        <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
        <div class="wrapper">
            <div class="line"></div>
            <div class="rectangle"></div>
        </div>
    </div>
</div>

最终效果 #

图片会在黑色方块内水平、垂直双向居中，完全不影响红色竖线的位置，红色竖线从方块最顶部开始渲染，和方块顶部无缝贴合，没有偏移。

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