[CSS] 수평 정렬 & 수직 정렬

수평 정렬

inline 요소

• inline요소와 inline-block 요소에 가능한 방법
• 요소의 부모 태그에게 text-align: center; 적용

block 요소

• 요소에 margin: 0 auto; 적용

---

수직 정렬

수평 정렬과 다르게 한 번에 정렬되는 방법이 없기 때문에 여러 속성들을 함께 써서 적용해야 한다.

block 요소

1. block 요소는 vertical-align 적용이 불가능하므로 inline-block으로 display 값을 변경
2. vertical-align: middle; 적용

1-1. 정 가운데에 배치

1. height가 100%인 <div>를 생성 (가운데 배치를 도와 주는 가짜 요소)
2. 이 요소에 vertical-align: middle; 적용

1-2. 요소가 밀려난다면?

• HTML 작성에서 <div> 사이의 띄어쓰기 삭제
• 띄어쓰기 공간 만큼의 마이너스 여백 설정 (margin 사용)

2. line-height 사용

• 요소를 inline-block으로 설정
• 부모 요소에 부모 요소의 height와 같은 값의 line-height 설정
• line-height는 자식 요소에게 상속되므로, 자식 요소에게 line-height: normal; 을 설정