CSS 수직 정렬(transform 이용), 너비 계산(calc)

transform을 이용한 수직중앙정렬

• 요소의 top을 50% 내리고 요소의 높이의 50%만큼 위치를 올려서 수직 정렬을 구현

calc를 이용한 너비 계산 및 적용

• 사칙연산을 통한 너비 및 높이 계산 시 사용
• 다양한 방식 사용 가능(ex: calc(100% / 3), calc(50% - 30px), calc((50% - 3em)/2 + 5px)) 

 

예제 코드

See the Pen yLVzmpK by 이상섭 (@vskfamnu) on CodePen.