SOURCE

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  border: 2px solid red;
}
.b {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin-top: 100px;  /* 蓝色方块实际向下移动了50px？？ */
}
.c {
  position: absolute;
  width: 100px;
  height: 2px;
  border: 1px solid green;
}