(css) div를 화면 정중앙에 놓고 싶은데 세로 가운데가 안 됩니다

기초적인 질문이라 좀 부끄럽지만요. 박스 하나를 가로세로 딱 정중앙에 놓으려고 하는데 자꾸 위쪽에만 붙습니다.

가로는 이걸로 됐어요.

.box {
  width: 200px;
  margin: 0 auto;
}

근데 이건 좌우만 가운데로 오고 세로는 그대로 맨 위더라고요. margin auto가 위아래는 왜 안 먹는 건지도 궁금하고요.

검색해보니 flex 쓰라는 사람도 있고 position absolute에 transform 쓰라는 사람도 있고 grid 얘기도 나오는데, 뭐가 요즘 제일 깔끔한 방법인가요? 예전엔 세로 중앙이 그렇게 어렵다던데 왜 그런지도 같이 알려주시면 감사하겠습니다.