div 엘리먼트 가로, 세로 중앙 배치

div를 브라우저의 정중앙이나 원하는 엘리먼트 정중앙에 위치시키고 싶을 때가 있다.
특히 레이어 팝업을 만들어 노출할 때 주로 필요로 하다.

하지만 아쉽게도 이게 정답이다라고 할 방법은 없다. 이유는 어떤 것은 크로스 브라우징이 안되는 Transform을 사용할 때도 있고, 마진으로 억지로 맞추는 경우등 여러가지 방법등이 있다.

그중에 본인이 주로 쓰는 방법이 있다. div 가로 세로 길이가 정의된 경우에 유용하다.

<div class="divClass"></div>

 위 처럼 html에 .divClass라는 클래스를 둔 div를 아래 코드처럼 css로 코딩한다.

.divClass {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    height: 300px;
    margin: auto;
}

다시 말하지만 이게 정답은 아니다.
데이터가 길어지는 엘리먼트가 된다면 마진으로 잡는 방법을 추천한다. 

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP