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

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

페이지 정보

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

본문

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

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

#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 정가운데 정렬

#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 값의 반으로 마이너스 해준다.

그럼 가운데로 간다.

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