[CSS] position을 이용한 정렬하기

transform: translate이나 flexbox의 align-items 속성을 사용하여 요소를 수직 정렬하는 방법도 있지만,
position 속성을 사용하여 요소를 수직 정렬하는 방법도 존재한다. 과정은 다음과 같다.

1. 부모 요소에 position: relative 을 지정한다.
2. 정렬하고자 하는 요소에 높이를 부여한다.
3. 정렬하고자 하는 요소에 position: absolute 을 지정한 뒤 top: 0; bottom: 0;을 설정해 부모 요소의 높이 전체를 사용한다고 지정한다.
4. margin: auto로 지정하여 남는 공간을 자동으로 나눠서 중앙 정렬되도록 만든다.

수평 정렬의 경우에도 정렬하고자 하는 요소에 너비를 지정하고, left: 0; right: 0;을 설정하고 동일한 방식으로 하면 된다.

❗️ 유의점

정렬하고자 하는 요소의 크기가 부모 요소보다 크다면 적용이 되지 않는다.