CSS를 사용해서 중앙정렬을 하려면 여러 팁들이 있습니다.
제가 사용하는 방법은 크게 두 가지 입니다.
1. 고정된 width, height 값을 가지는 element 의 정렬.
2. 가변폭을 가지는 element 의 정렬.
1번의 경우는 아주 쉽습니다.
.element{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
쉽게 이해되시죠?
마이너스 마진값을 가지고, 결국 자신의 폭의 절반을 빼주는 겁니다.
이렇게 하면, 언제나 화면 중앙에 요소배치가 가능합니다.
2번의 경우는 좀 더 복잡합니다. 마컵이 여러 단계로 필요한데요.
<!-- HTML MARKUP -->
<div class="to_this">
<div>
<div>
<div class="align_me"></div>
</div>
</div>
</div>
무려 네 단계의 마컵을 거칩니다.
CSS 를 less.css 기준으로 보여드리면 이렇습니다. (이해하기 쉬우시라고)
.to_this{
position:absolute;
top:0; left:0; bottom:0; right:0;
z-index:10;
>div{
display:table;
width:100%;
height:100%;
>div{
display:table-cell;
vertical-align: middle;
.align_me{
padding:10px;
}
}
}
}
1) 결국 window 를 기준하려면 기준점이 필요하기 때문에, div.to_this 가 절대포지셔닝으로 전체화면을 채웁니다.
2) 그 바로밑의 div 는 table 역할을 해야하기 때문에 역시 전체화면을 꽉 채우는 table 로서의 역할
3) 그 바로 아래가 table-cell 로서 중앙정렬자 역할을 해주고요.
4) 마지막 div.align_me 가 가변폭을 가지는 그 무엇이 될 수 있습니다.
쉽게말해, table / table-cell 관계를 가지고 중앙정렬을 하는 것인데, 늘 화면 중앙에 두기 위해서 여러 꼼수를 쓴 겁니다.
