CSS로 요소 정중앙에 배치하는 4가지 방법

요소 정중앙 배치하는 방법은 생각보다 다양하다.

나는 주로 display :flex를 많이 쓴다.

정중앙 뿐만아니라 정렬도 할 수 있어서 편한 것도 있고

처음 flex를 배울땐 너무 어려워서 계속 반복하면서 더 써보려고 하다보니 이제는 오히려 더 찾게 되는 것 같다.

그래서 오늘은 요소를 정중앙에 배치하는 방법을 알아보려고 한다.

상황에 따라 원하는 것을 골라 쓰면 될 듯 하다.

display: flex;
justify-content: center align-items: center;
height: 100vh;

display: grid;
place-items: center;
height: 100vh;

position: relative;
height: 100vh;

margin: 0 auto;