css 수직 가운데 구현

table 로 쓴 표 라면 vertical - align: middle 로 수직 으로 가운데 로 이동 할 수 있 습 니 다.
 
div 로 쓴 표 라면 이렇게 써 야 합 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0;}
#container { width: 500px; height: 600px; display: table; border:1px solid;}
#position { display: table-cell; vertical-align: middle; text-align: center; }
#container { *position: relative; }
#position { *position: absolute; *top: 50%; }
#content { *position: relative; *top: -50%; }
</style>
</head>
<div id="container">
	<div id="position">
		<div id="content">           </div>
	</div>
</div>
</html>

 hack 쓰기: 속성 전에 "*" 또는 "\ #" 를 추가 하면 IE7 및 아래 버 전 만 이해 할 수 있 으 며, 다른 브 라 우 저 는 이것 을 이해 할 수 없습니다. "*" 와 "\ #".

좋은 웹페이지 즐겨찾기