[CSS] 요소 화면 중앙에 배치하는 방법

 

 

CSS 화면 중앙에 요소 배치 방법

 

 

 

HTML요소를 CSS속성으로 화면 중앙에 배치하는 방법을 알아보도록 하겠습니다.

 

 

1. position과 transform 사용

 

.box {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    }

 

absolute 속성으로 3차원으로 띄운 후 너비와 높이의 길이만큼 50%씩 밀어낸 후 자신의 너비와 높이 크기의 반만큼 당기는 방법입니다.

 

 

이 방법의 장점으로는 width, height의 길이가 유동적이어도 사용 가능하다.

단점 : IE8 이하 사용 불가능