div {
  width: 50px;
  height: 100px;
  background: skyblue;
  position: absolute;
  /* top: calc(50% - 20px);
  left: calc(50% - 50px); */
}

top: calc の 50％ は、全体（ 100％ ）の半分で、20px はどこからくるんでしょうか。
あと、50px もどこからくるんでしょうか