관리 메뉴

심재운 블로그

div 태그 screen 화면 중앙 center 에 보여주기 ✔ 본문

프로그래밍/jQuery

div 태그 screen 화면 중앙 center 에 보여주기 ✔

재우니 2013. 9. 3. 09:25

 

 

 

 

아래 처럼 css 를 이용하여 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=utf-8" />
<title>화면중앙정렬</title>
<style type="text/css">
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }


#center { position:absolute; top:50%; left:50%; width:300px; height:200px; overflow:hidden; background-color:#FC0; margin-top:-150px; margin-left:-100px;}


</style>
</head>
<body>


<div id="center">웹표준과 중앙정렬</div>


</body>
</html>

 

아래 사이트도 화면 중앙에 보여주는 부분이다.

 

 

body
{
 text-align: center;
 margin: 0 auto;
}


#box
{
 position: absolute;
 width: 500px;
 height: 500px;
 left: 50%;
 top: 50%;
 margin-left: -250px;
 margin-top: -250px;

 border: #000 solid 1px;
 background: #82713F;
}


<body>
 
 <div id="box"> </div>

 

 


 

0 Comments
댓글쓰기 폼