요소 가운데 정렬

HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요.

수직 정렬은 까다로워서 거의 억지로 하는 것 같아요.

 

아래 html 태그는 실험 대상이에요.

이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요.

 

<div class="parent" style="width: 200px; height: 200px; background: #F78181;">
    <div class="child" style="width: 100px; height: 100px; background: #819FF7;">

    </div>
</div>

 

위의 html 태그를 브라우저에서 열면 이렇게 그려져요.

 

 

 

파란색 div를 수직으로 정렬해볼게요.

html은 건드리지 않을거에요.

 

 1. 테이블

parent div 태그를 테이블처럼 만들어서 vertical-align 속성을 사용할 수 있게 하는 방법이에요.

 

.parent {
    display: table-cell;
    vertical-align: middle;
}

2. 포지션 직접 조정

child div 태그의 위치를 직접 가운데로 조정하는 방법이에요.

( parent의 height - child의 height ) / 2한 값을 top으로 주면 되요.

 

.child {
    position: relative;
    top: 50px;
}

3. Margin

child div 태그를 inline-block 속성으로 변경해주고 margin을 주면 되요.

포지션을 직접 조정할 때와 마찬가지로 ( parent의 height - child의 height ) / 2한 값을 margin-top으로 설정하면 되요.

margin-top이 아닌 margin을 주면 수평 정렬까지 될거에요.

 

.child {
    display: inline-block;
    margin-top: 50px;
}

4. flex

parent div 태그에 flex 속성을 주면 엘리먼트의 크기나 위치를 잡아줄 수 있어요.

align-items: center;로 수직으로 정렬할 수 있습니다.

 

.parent {
    display: flex;
    align-items: center;
}

 

 

이외에도 parent 안에 div를 추가해서 높이를 맞추는 경우도 있던데 개인적으로 비추해요..

빈 태그를 많이 쓰다보면 유지보수가 너무 힘들더라구요.

 

제가 사용하는 방법은 주로 이렇게 네 가지인데 그때그때 맞게 쓰는거 같아요.

신규로 페이지를 만들 때는 편한거 쓰면 되지만, 기존 코드에서 써야할 경우에는 잘 선택해서 쓰시면 되요.