1. position: absolute; 50%로 밀고 px로 당기기.
//html 1번~3번
<div class="box">
저는 부모의 세로 중앙에 위치할 예정입니다 :D
</div>
//css
.box {
position:absolute;
top:50%; left:50%;
margin-top:-100px; margin-left:-100px;
width:200px; height:200px;
}
※ 가운데 정렬시키고 싶은 대상을 왼쪽, 위로부터 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법. 가장 통상적인(?) 방법.
- 장점 : 막힘없는 하위 버전 호환.
- 단점 : 대상의 width, height 값이 유동적이지 않다. (px로 고정 후 반 길이만큼 당겨주어야 하므로!!)
2. position: absolute; 50%로 밀고
translate으로 당기기.
//css
.box {
position:absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
}
※ 마찬가지로 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법.
- 장점 : width와 height가 고정되지 않아도 사용 가능하다.
- 단점 : transform의 크로스 브라우징이 안 좋다. prefix 필요. IE 8 이하는 적용되지 않는다.
3. position 모든 방향에서 당기는 방법.
//css
.box {
position:absolute;
top:0; left:0; bottom:0; right:0;
height:10%; // 임의로 준 크기.
margin:10% auto;
}
※ div를 모든 방향에서 당긴 후( 이때 div는 전 화면에 꽉 차게 된다.) height 값을 주면 전체 부모의 가운데에 위치하게 됨.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.
4. table-cell로 만들어 세로 중앙 정렬 시키기.
//html
<div class="wrapper">
<div class="box">
<div>저는 부모의 세로 중앙에 위치할 예정입니다 :D</div>
</div>
</div>
//css
.wrapper {
display:table;
}
.box {
display:table-cell;
vertical-align:middle;
}
※ 전체 감싼 박스를 table로 만든 후 안의 박스를 table-cell로 만들어 그 안의 개체를 vertical-align:middle로 중앙 정렬 시키는 방법. 한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
.wrapper의 공간이 없어도 내용이 잘리지 않는다.
- 단점 : IE7 이하는 작동하지 않는다. 약간 태그 단계가 깊어진다.
5. float 속성을 이용하는 방법.
//html
<body>
<div id="floater"></div>
<div id="box"> Content Here </div>
</body>
//css
body { height: 500px; }
#floater {
float:left;
height:50%;
margin-bottom:-120px;
}
#box {
clear:both;
height:240px;
position:relative;
}
※ floater라는 보이지 않는 div를 body의 50%의 높이를 갖게 한다. 그 바로 아래에 clear 속성을 넣은 box가 위에 floater밑으로 오게하면 자기 크기의 반만큼 중간에서 floater의 margin으로 당겨지게 된다.
* margin-top 이나 margin-left는 음수 값으로 당기면 스스로가 그 방향으로 당겨지지만, right나 bottom은 본인이 아닌 그 다음에 오는 요소가 당겨지게 한다.
- 장점 : 모든 브라우저에서 작동한다.
- 단점 : 공간이 좁을 땐 콘텐츠가 잘리고 스크롤바가 나타난다.
6. :before로 가상 콘텐츠를 넣어 중앙 정렬 시키기.
//html
<div class="wrapper">
<div class="box"> 저는 부모의 세로 중앙에 위치할 예정입니다. :D</div>
</div>
//css
.wrapper {
height: 100%;
text-align: center;
}
.wrapper:before {
content: ""; display: inline-block;
width: 1px; height: 100%;
margin-right: 0; vertical-align: middle;
}
.box {
display: inline-block; vertical-align: middle;
}
※ 100% 높이를 가진 부모의 앞에, 100% 높이를 가진 박스 하나를 놓는다. 그 박스에 vertical-align:middle을 줘서 그 안의 박스가 세로 가운데 정렬 되도록 하는 것.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.
추천 : 