HTML/CSS 가운데 정렬

css로 div를 수평으로 가운데 정렬해볼게요.

 

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

 

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

 

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

 

1. inline-block

child div에 inline-block 속성을 주면 div도 text-align을 사용하여 가운데 정렬을 할 수 있어요.

단, child의 요소들까지도 모두 가운데 정렬이 됩니다.

 

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

 

2. flex

parent div에 flex 속성을 주면 엘리멘트 요소의 위치를 조정할 수 있어요.

 

.parent {
    display: flex;
    justify-content: center;
}

 

 

 

수직 가운데 정렬이 궁금하시면 이 글을 참고해주세요.

https://gofnrk.tistory.com/25

HTML/CSS div 수직 가운데 정렬 (Vertical Align)