back

  • person_pin
  • calendar_today
  • remove_red_eye

[CSS] DIV 가운데 정렬하기 - 페이지 정가운데 / 혹은 그냥 가운데 정렬

페이지 정보

작성자 webpaper 댓글 0건 조회 3,571회 작성일 19-02-14 11:27

본문

CSS 로 박스(컨텐츠)를 가운데로 정렬하기 

#1. 그냥 가운데 정렬하기 

f4d8dfc7b09e1b9a03448e6c76fe903f_1550111386_8611.jpg


#wrap{
    width:100%;
    height:100%;
    background:#000;
}
 
#wrap .box{ 
    width:300px;
    height:300px;
    margin:0 auto;
}



margin:0 auto; 

이 친구를 넣어주면 왠만하면 가운데로 간다. 물론 img 나 text는 "text-align:center" 를 쓰길




#2 정가운데 정렬

f4d8dfc7b09e1b9a03448e6c76fe903f_1550111393_9643.jpg

 
#wrap{
    width:100%;
    height:100%;
    background:#000;
    position:relative;
} 
#wrap .box{ 
    width:300px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
}



물론 다른 방법도 있다. 그런데 이 방법이 젤 편하고 안까먹게 된다. 

원리는 일단 BOX의 position 을 absolute 로 준 다음에 left/top 를 50%로 준다. 

그럼 x와 y 값에 따라서 50% 지점부터 box 크기 300px 이 먹게된다. 

그러니 정가운데로 오려면 margin 값을 box width 값의 반으로 마이너스 해준다. 

그럼 가운데로 간다. 

난 가끔 이해가 안되면 그려가면서 하는데 한번 그려보면 이해가 될 것이다.