JAY⌨️CODE

[JAY⌨️CSS] 요소를 가로, 세로 중앙 정렬 하는 방법 모음!

1️⃣ Transform : translate() 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 transform: translate(-50%, -50%); 값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성! 요소 크기에 대한 transform 값을 퍼센티지로 주기 때문에 유지보수에 용이해서 가장 보편적으로 사용하는 방법. .parent { /* 부모 ..

2023.03.21