레이아웃 (7) 가운데 정렬

(1-1) position:absolute 또는 fixed; top:50% left 50% / margin-top:-height/2 margin-left: -width/2

 

See the Pen 가운데 정렬 (position) by ++EXP (@pp_exp) on CodePen.

 

position 속성을 이용해 top, left 속성을 적용하고, margin-top/left로 대상 요소의 정 중앙을 맞추어 중앙정렬을 실시.

만약 부모 개체가 존재한다면, position:relative를 사용하여 배열할 수 있다.

 

(1-2) transform: translate(-50%, -50%);

 

See the Pen 가운데 정렬 (position) (2) by ++EXP (@pp_exp) on CodePen.

위 방법에서 마진 속성을 transform:translate(-50%,-50%)로 원리 또한 동일함. 

그러나, 이 속성은 IE9 이하 브라우저에서는 사용이 불가능하다.

 

(2) display 속성 변경해서 적용하기

 

 - inline-block

 

See the Pen 가운데 정렬 (display:inline-block) by ++EXP (@pp_exp) on CodePen.

inline 속성에는 기본적으로 vertical-align속성을 지정할 수 있다. vertical-align:middle로 가운데 정렬 실시. 만약 .center의 내부 컨텐츠 영역이 가운데 정렬되어 있지 않다면, 부모 요소인 .parent의 line-height속성 또한 영향을 받으므로 필히 vertical-align속성을 .center에 부여해 주어야 한다.

 

 - table /table cell

See the Pen 가운데 정렬 (display:table) by ++EXP (@pp_exp) on CodePen.

위와 같은 방법으로, table / table-cell 속성을 부여하여 전체 영역을 묶어내고(display:table), 세로 정렬은 table-cell속성이 맡고, 가로 정렬은 맨 하위의 .box가 담당하는 형식이다.

 

이 방법을 사용하면, vertical-align 속성이 적용된 table-cell 안에 block요소를 넣을 수 있다.

(inline 속성은 내부에 block요소 작성 불가능)

block 요소의 가로 가운데 정렬은 margin: 0 auto로 구현한다.