[css] 6가지의 확실한 수직 가운데 정렬 방법

다양한 높이의 요소들을 수직 가운데 정렬하는 일은 수평 가운데 정렬하는 것보다 다로 까다롭다.

각각의 특징을 비교하여 6가지의 수직 가운데 정렬을 소개한다.

 

수직정렬은 자식이 inline속성을 가지냐 block 속성을 가지냐에따라 적용 여부가 달라지므로,

각 속성들의 특징파악이 선행되어야한다.

1. display : flex 사용

특징	가장 손쉽게 할수있는 방법 수직정렬하고자하는 요소가 하나거나 두개이거나 상관 없음 IE9 이하는 지원하지 않음
방법	부모에 display:flex; align-items:center; 와 높이값 추가

 

See the Pen 수직 가운데 정렬 1 by off-echoi (@off-echoi) on CodePen.

2. display : table 사용

특징	태그의 깊이가 깊어 질 수 있다.
방법	자식 상위의 부모요소에 display:table-cell; vertical-align: middle; 그부모 상위 부모에 display:table;

 

See the Pen 수직 가운데 정렬3 by off-echoi (@off-echoi) on CodePen.

 

3. :before 로 가상의 기준점 만들기

특징	낮은 IE버전도 적용 가능 자식요소가 inline의 성격을 가져야 함(display:inline 혹은 disdplay:inline-block)
방법	부모에 가상의 요소를 추가해 높이값을 100%로 주고 vertical-align:middle 자식요소도 마찬가지로 vertical-align:middle;

 

See the Pen 수직 가운데 정렬4 by off-echoi (@off-echoi) on CodePen.

4. position + margin 속성

특징	자식 요소가 여러개이거나, 스크립트를 적용할 경우 태그의 깊이가 깊어질 수 있다. 자식요소의 높이가 변경되면 margin의 값 또한 수정해주아햐한다. 낮은 버전의 IE 적용 가능
방법	최상위 요소에 position:relative; 바로 하위의 요소에 position:absolute; top:50%; margin-top:(자식높이의 절반값을 음수로 지정)

 

See the Pen 수직 가운데 정렬5 by off-echoi (@off-echoi) on CodePen.

5. position + transform 속성

특징	자식 요소가 여러개이거나, 스크립트를 적용할 경우 태그의 깊이가 깊어질 수 있다. 4번에 비해 IE 지원 범위가 좁다(IE8 이하는 지원하지 않음)
방법	최상위 요소에 position:relative; 바로 하위의 요소에 position:absolute; top:50%; transform: translate(0,-50%);

 

See the Pen 수직 가운데 정렬5 by off-echoi (@off-echoi) on CodePen.

6. line-height 사용

특징	텍스트의 가운데 정렬이 쉬움 2줄 이상의 경우 원하는 결과를 얻을 수 없다. 부모의 높이가 바뀔 경우 line-height 값도 조정해주어햐 함
방법	자식에 line-height:(부모의 높이만큼);

 

See the Pen 수직 가운데 정렬2 by off-echoi (@off-echoi) on CodePen.