vertical align & center box(수직 중앙 정렬)

요소 중앙 정렬(수직정렬)

요소를 중앙(센터) 정렬하는 방법에는 여러가지가 있습니다.

가령, 가장 잘 알려진 line-height 로 중앙정렬을 시키는 방법은 text/image 가 single line 일 경우에만 가능하다는 단점이 있습니다.

그리고 위의 그림과 같은 position: absolute 를 이용하는 방법(demo)과 display: table-cell 을 이용하는 방법이 있습니다.

table-cell 은 다음과 같이 많이 사용합니다.

<div class="something-semantic">
    <div class="something-else-semantic">
        Unknown stuff to be centered.
    </div>
</div>

<style>
    .something-semantic {
        display: table;
        width: 100%;
    }
    .something-else-semantic {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
</style>

위에 언급된 방법들은 CSS 만을 이용할 시 각각의 해당 요소들을 중앙 정렬 시킬때 마다 line-height 나 margin 값을 재조정해 주어야 합니다.

위의 방법 외에 가상 요소를 사용하여 중앙 정렬시킬 수 있는 좀 더(?) 유연한 방법에 대해 알아보도록 하겠습니다.

vertical-align & :before 이용하여 중앙 정렬시키기

참고로 diplay: table-cell 과 마찬가지로 :before 역시 IE7 를 지원하지 않기 때문에 크로스브라우징은 되지 않습니다.

위의 그림을 보면 가상 요소인 :before 를 이용하여 height: 100% 를 설정한 후 가상요소는 물론 중앙정렬을 시키고자 하는 요소에도 vertical-align: middle 을 주는 방법을 사용합니다.

다음의 코드를 통해 살펴보도록 하겠습니다.

See the Pen MaNmXa by jaeheekim (@jaehee) on CodePen.

SCSS vertical-align 참고 : Vertical align method

Related Info

1. Pure CSS : Layer-popup Auto center box

Jaehee's WebClub