1. div안에 div가운데 정렬하는 방법
<div class="container" style="text-align: center; margin: 0 auto;" >
<div style="border: 1px solid; display: inline-block;">
</div>
</div>
바깥 쪽 div에는 text-align과 margin값을 준다.
안에 있는 div의 display의 기본값은 block으로 inline-block으로 바꿔준다.
2. div안에 텍스트 세로 가운데 정렬
텍스트 가운데 정렬은 text-align:center;로 해주면 되지만, 텍스트 세로정렬은 div에 display:tabel-cell과 vertical-align:middle; 해줘야한다.
<div style="display:table-cell; text-align: center; vertical-align:middle; border: 1px solid;">
가운데
</div>
1. margin: 0 auto를 이용한 가운데 정렬
일반 텍스트의 경우 text-align:center;를 사용하면 정렬할 수 있지만,
<div>, <p>, <blockquote> 등의 block 요소에는 text-align의 영향을 받지 않습니다.
이럴 경우 해당 요소에 width를 지정해주고 margin:0 auto;를 넣어주면 쉽게 가운데 정렬할 수 있습니다.
예제 : http://jsfiddle.net/SMaker/7d7r0cnx/
2. display:inline-block을 이용한 가운데 정렬
인라인 블록 요소가 text-align의 영향을 받는 것을 이용하면, 블록 요소를 가운데 정렬할 수 있습니다.
가운데 정렬할 요소에 display:inline-block을 주고 해당 요소를 블록 요소로 감싼 뒤에, 해당 블록 요소에 text-align:center을 주면 됩니다.
예제 : http://jsfiddle.net/SMaker/o6hbggjb/
HTML 만으로 마우스오버 구현하는 방법
float 속성을 가진 div 100% 설정하는 방법
자료가 도움이 되었다면 댓글과 평가 부탁합니다. 
