살아 숨 쉬는 웹 - 블루비 :: Web Developer

DIV 가로, 세로 가운데 정렬 스타일시트 소스

웹프로그래밍™/XHTML/CSS 2008/09/02 13:25 by 블루비 Total 1256 : Today 2 : Yesterday 19

DIV 가로, 세로 가운데 정렬 스타일시트 소스

미리보기

<!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; /*** width 값의 1/2 ***/
margin-left:-100px; /*** height 값의 1/2 ***/
background:yellow;
}
</style>
<body>
<div id='wrap'>
<div id='body'>
</div>
</div>
</body>
</html>