position:absolute 일 때, 가운데 정렬

#greeting {
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

transform을 사용하기 전, top과 left로 50% 를 적용하게 되면 

웹의 가운데 부분의 중앙 보다 하단에 위치하게 된다.

이 상태에서 transform으로 요소 사이즈만큼 반대로 이동을 시키면 된다.

transform: translate(-50%, -50%);