div 화면 중앙정렬

항상 고민 중이었던 것 중에 하나가 스타일시스이다

웹 개발자로 일하다가 보면 자주 스타일시스를 만나게 되고

개발자라고는 하지만 결국 스타일시스를 사용할 때가 있다.

그중에서 div 태그를 화면 정중앙에 위치시키는 것을 자주 찾아보았다.

계속 찾기 귀찮고 해서 블로그에 포스팅 하기로 하였다.

생각보다 간단하게 처리가 가능하였다.

.center

{

    width: 240px; /* 폭이나 높이가 일정해야 합니다. */ 

    height: 86px; /* 폭이나 높이가 일정해야 합니다. */ 

    position: absolute; 

    top: 50%; /* 화면의 중앙에 위치 */ 

    left: 50%; /* 화면의 중앙에 위치 */ 

    margin: -43px 0 0 -120px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */ 

    border: 1px inset #ddd; 

}

div의 폭과 높이가 일정하다고 한다면 다음과 같은 방법으로 중앙에 배치할 수 있다.

여기서 주의할 점이라면 마지막 줄의 margin에서 top과 left 속성을 div 폭의 반씩 준다는 점이다.

이점만 유의 하면 쉽게 중앙 배치를 할수 있을 것이다.