Element 수직 정렬


<div id="A">
    <div id="B">
        ABC
    </div>
</div>


#A {
  width: 400px;
  height: 300px;
  background-color: skyblue;
}

#B {
  width: 100px;
  height: 100px;
  background-color: royalblue;
}

위와 같은 Element가 있다고 가정한다. div #B를 #A의 정중앙에 위치하고자 한다면 어떤 방법을 이용해야 할까?

1. display table 이용하기


<div id="A">
    <div id="B">
        <div id="C">
            ABC
        </div>
    </div>
</div>


#A {
    display: table;
    width: 400px;
    height: 300px;
    background-color: skyblue;
}

#B {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-color: royalblue;
}

#C {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: slateblue;
}

위 방법은 제일 기준이 되는 #A에게 display: table; 속성을 주고, #B에게 display: table-cell; vertical-align: middle;, 그리고 #C를 추가하여 margin: 0 auto; 속성을 주었다.

하지만 개인적으로 요소 정렬을 위하여 또 다른 Elements를 만드는 것을 굉장히 싫어한다. (귀찮기도 하고...)

따라서 이 방법은 필자가 거의 사용하지 않는 방법이다.


<div id="A">
    <div id="B">
        ABC
    </div>
</div>


#A {
    width: 400px;
    height: 300px;
    background-color: skyblue;
}

#B {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: royalblue;
}

이번에는 #B에만 새로운 속성이 잔뜩 들어갔다. 대충 정리하자면

display: inline-block; position: relative; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;

이렇게나 많은 속성이 들어갔다.

원리를 간단히 설명하자면 #A(부모) 기준으로 50%(절반) 만큼 Element를 내리고, 자신의 Width, Height 만큼 Element를 반대로 이동시킨다.

사진에서의 Width와 Height는 100px임으로, -50px만큼 반대로 이동시켜준다.

자신의 width, height 만큼 - margin으로 위치를 조절한다.

하지만 이 방법은 #B가 유동적인 Width를 가져야 할 경우 js 등으로 일일이 margin을 조절해줘야 한다는 단점이 있다.

또한 Width를 수정할 때마다 Width / 2 값을 일일이 입력해줘야 하는 자신을 보게 된다. (Width가 홀수일 경우 값을 입력해지기 애매해진다... 예를 들어 Width가 101px 이면, 50.5px...?)


<div id="A">
    <div id="B">
        ABC
    </div>
</div>


#A {
    width: 400px;
    height: 300px;
    background-color: skyblue;
}

#B {
    position: relative;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: royalblue;
}

이는 필자가 사용하는 방식으로 이 방식을 설명하기 위해서 위 2개의 내용을 같이 다루게 되었다.

원리를 설명하자면, margin 대신에 transform: translate(-50%, -50%); 속성을 사용했다는 점이다.

transform은 2D 평면계에서 좌표, 모양 등을 변형할 수 있는 속성으로 translate는 그중 좌표를 변형할 수 있는 CSS 속성이다.

속성에서 나타나는 %의 기준은 Element의 Width와 Height 값이고 translate(x, y); 형태로 사용된다.

따라서 바로 위에서 본 margin을 일일이 입력하는 작업을 translate -50%이 직접 계산하여 반영해준다는 것이다.

다른 방법은 많고 많지만 대부분 많은 실제 사이트 및 많이 사용되는 방법을 3가지 소개해봤다.

이 외 더 많은 방법이 있으니 자신의 프로젝트와 목적에 가장 맞는 것을 사용하면 될 것 같다.

다람쥐 헌 쳇바퀴에 타고파

Element 수직 정렬

1. display table 이용하기