(html/css) div를 화면 정중앙에 정렬하는 방법

가끔 반응형 웹을 보면

화면 정중앙에 네모난 div가 위치한 모습을 볼 수 있다!(정말 예쁘지 않은가?)

div를 페이지 정중앙에 정렬하려면 어떻게 해야할까?(수평/수직 정렬 등이 모두 필요하다!)

다음과 같이 처리하면 된다!



<!-- CSS 부분-->
<style>
html, body
{
    height: 100%;
}

body
{
    display: table;
    margin: 0 auto;
}

.container
{
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.main
{
    height: 200px;
    width: 200px;
    background-color: blue;     
}
</style>


<!-- 본문 부분 -->
<div class="container">
    <div class="main"></div>
</div>



해외 엔지니어가 올려준 소스인데

정말 깔끔하고 유용한 것 같다.(댓글이 온통 극찬 세례이다!)



출처 : http://stackoverflow.com/questions/17520145/center-a-div-horizontally-and-vertically-and-keep-centered-when-resizing-the-par