CSS 가운데 정렬

가로 중앙 정렬

폭이 정해진 블럭 요소
auto는 마진의 왼쪽과 오른쪽 여백이 동일하게 나눠짐을 의미한다.
p {
  width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */
  margin: 0 auto;
}
가변폭인 블럭 요소
ie8 이상
가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능
<style>
  .horizon{ display: table; margin-left: auto; margin-right: auto; }
</style>
 
<div class="horizon">
  <div class="item">block item</div>
</div>
ie6 ~ 7 호환
<style>
  .horizonCont{ text-align: center; }
  .horizon{ display: table; margin-left: auto; margin-right: auto; display: inline-block; }
</style>
 
<div class="horizonCont">
  <span class="horizon">
    <span class="item" style="display:block">block item</span>
  </span>
</div>
inline-block을 지원하지 않는 브라우저는 display: table과 margin을 적용받아 가운데 정렬이 되고, 나머지 브라우저에서는 text-align: center와 display: inline-block이 적용되어 가운데 정렬이 된다.

포지션이 absolute일 때
포지션이 absolute일 때 중앙정렬 (가로 + 세로)
left와 top을 50%로 준 뒤 margin-top: -(요소의 height/2); margin-left: -(요소의 width/2); 를 해준다

<style>
	.align_center{ position:absolute; width:100px; height:50px; left:50%; top:50%; margin-left:-50px; margin-top:-25px;
</style>
 
<div class="align_center">
	<p>중앙정렬 (가로 + 세로)</p>
</div>

세로 중앙 정렬

테이블안의 요소 정렬
<style>
	table { vertical-align: middle; }
</style>
div태그의 display속성을 table로 설정하는 방법
<style>
  #wrapper { display: table; }
  #cell { display: table-cell; vertical-align: middle; }
</style>
 
<div id="wrapper">
  <div id="cell">
    <div class="content">내용내용</div>
  </div>
</div>
높이가 변해도 상관없다(CSS에 높이를 지정하지 않아도 된다).
wrapper에 공간이 없어도 내용이 잘리지 않는다.
IE7 이하에서 작동하지 않는다.

absolute 속성을 이용하는 방법
<style>
  #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
</style>
 
<div id="content">내용내용</div>
float 속성을 이용하는 방법
<style>
  #floater {float:left; height:50%; margin-bottom:-120px;}
  #content  {clear:both; height:240px; position:relative;}
</style>
 
<div id="floater"></div>
<div id="content">
  Content Here    
</div>
모든 브라우저에서 작동한다.
충분한 공간이 없을 때 (예컨대 윈도우 사이즈를 줄일 때) 콘텐츠가 잘리고 스크롤바가 나타난다.

line-height 속성을 이용하는 방법
텍스트일때만 작동한다.
공간이 없어도 잘리지 않는다.
한 줄 이상이 되면 깨진다.
<style>
  #content { height: 100px; line-height: 100px; }
</style>
 
<div id="content">Content Here</div>