중앙 정렬 문제(Perfect Centering Issue)

qpress 2020년 2월 14일 40

HTML 문서 작성 시 은근히 어려운 것이 바로 중앙 정렬이다. 가로 정렬은 그나마 쉬운 방법이 있지만, 세로 정렬(Vertical Align)은 일종의 Trick을 사용해야만 가능한 경우도 있다.

최신 CSS 표준에서는 Flexbox 속성으로 중앙 정열이 까다로운 상황을 쉽게 해결할 수 있는데, 여기서 Flexbox 포함하여 다양한 중앙 정열 방식에 대해 정리한다.

가로 정렬


특정 요소를 가로로 정렬 하는 것은 비교적 간단하다.
가장 많이 사용하는 것이 ‘text-align:center’ 속성인데, 이는 text 요소 또는 inline, inline-block 속성을 가진 요소에만 적용 된다.
inline 속성이 없는 일반 Element를 가로 중앙 정렬을 하려면 margin:0 auto; 속성을 부여 해야 한다.

<div style="margin:0 auto;width:50px">
    Content...
</div>

세로 정렬


문제는 세로 정렬이다.
높이가 정해진 Box 요소 안에 간단한 Text 한줄을 중앙에 정렬하는 것도 쉽지가 않기 때문이다.(text-align : middle 같은 속성이 없기 때문임)

Padding을 통한 중앙 정렬 – 높이가 가변적인 경우

중앙에 정렬 시키고자 하는 요소의 위, 아래 여백을 동일하게 부여함으로써 중앙에 배치되는 효과를 주는 방식인데, 부모 요소의 높이가 지정되지 않은 경우에 사용할 수 있다. (요소 내부의 양에 따라 전체 높이가 달라지기 때문임)

<div style="padding:50px 0px">
    content...
</div>

Table cell을 통한 중앙 정렬 – 위치 고정일 경우

vertical-align 속성이 유일하게 저용된는 Table cell 속성을 활용하는 방식인데, 기본적으로 ‘표(Table)’ 구현에 해당하는 방식이기 때문에 정렬되는 요소가 브라우저 환경에 따라 위치와 크기가 변하는 반응형 UI 에서는 제약이 많다. 그래서 Table cell 방식 보다는 아래의 Flexbox 방식이 더 선호 된다.

<div style="display:table">
    <div style="display:table-cell;vertical-align:middle;height:200px">
        Contents....
    </div>
</div>

Flexbox를 활용한 중앙 정렬

Advanced CSS의 가장 대표적인 속성이 flex라고 볼 수 있는데, 반응형웹 구현에 필수적인 속성이라고 할 수 있다.
Flex 속성을 가진 Element에는 가로,세로 중앙 정렬 속성을 부여할 수 있어서 사실상 Perfect Centering의 가장 좋은 방법이라고 볼 수 있다.

<div style="display:flex;align-items:center;justify-content:center">
    <div>
        Content...
    </div>
</div>

높이가 정해진 영역(Wrapper) Element의 display 속성값을 ‘flex’로 설정한 후, 정렬에 관한 두가지 속성(justify-content, align-items)을 부여한다.
justify-content : 가로 정렬(중앙:center, 왼쪽:flex-start, 오른쪽:flex-end)
align-items : 세로 정렬(중앙:center, 위쪽:flex-start, 아래쪽:flex-end)


Code Sample

See the Pen Perfect Centering by Andy Jung (@Samchogo) on CodePen.