미리보기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> Div Vertical Align </title>
</head>
<style type='text/css'>
/***
* author : blueb (http://blueb.net/blog/1292)
* date : 2008-09-02
*/
#wrap {
width:100%;
height:600px;
border:1px solid #000;
}
#body {
position: relative;
top:50%;
left:50%;
width:200px;
height:200px;
border:1px solid #000;
margin-top:-100px; /*** height 값의 1/2 ***/
margin-left:-100px; /*** width 값의 1/2 ***/
background:yellow;
}
</style>
<body>
<div id='wrap'>
<div id='body'>
</div>
</div>
</body>
</html>
2009/10/04 17:11 [수정/삭제] [답글]
좋은 정보 감사합니다.
근데 소스에 보면
margin-top:-100px; /*** width 값의 1/2 ***/
margin-left:-100px; /*** height 값의 1/2 ***/
에서 width값과 height값이 뒤바뀐거 같네요
margin-top에 height값의 1/2값이,
margin-left에 width값의 1/2값이...
오타인거 같네요
2009/10/04 18:17 [수정/삭제]
포스팅 한지 1년이 지났는데 이제서야 지적해주시는분이 한분 나타났네요.. ㅎㅎ.. 수정해두었습니다.
감사합니다. ^^