<div class="codetitle"> <span><a style="CURSOR: pointer" data="42606" class="copybut" id="copybut42606" onclick="doCopy('code42606')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code42606"> <br><!DOCTYPE html> ; <br> <br><meta charset="utf-8"> <br><title>JS는 div 센터링<br><style>/ *외부 레이어 div가 중앙에 있음*/ <BR>#main { <BR>위치: 절대 /*매우 중요*/ <BR> background-color: <BR>width:400px <BR>height:200px; ; <BR> /*왼쪽:50%; <BR>왼쪽 여백:-200px <BR>여백:-100px;*/ <BR>경계:1px ; <BR> } <BR><BR>#content { <BR>위치: /*매우 중요*/ <br>배경색: <br>너비: 200px <BR>높이: 100px; <BR>/ *왼쪽:50%; <BR>위쪽:50%; <BR>여백-왼쪽:-100px;*/ <BR><BR>/*텍스트 div 내부는 중앙에 위치합니다*/ <BR>text-align: center; <BR>line-height:100px /*줄 간격은 div 너비와 동일합니다*/ <br>} <br></style> ; <BR><body> <BR> <div id="main"> <BR><div id="content"> <BR>일 <BR><BR> ;/div> <BR><script type ="text/javascript"> <BR>window.onload = function() { <BR>// 브라우저 창 가져오기<BR>var windowScreen = document.documentElement; 🎜>// main의 div 요소 가져오기<BR>var main_div = document.getElementById("main") <BR>// 창 너비와 높이 및 div 너비와 높이를 통해 위치 계산<BR>var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 "px"; <BR>var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 "px"; <BR>// 위치 할당<BR>main_div.style. left = main_left; <BR>main_div.style.top = main_top; <BR><BR>// mcontent의 div 요소 가져오기 <BR>var content_div = document.getElementById("content") <BR>var content_left = (main_div.clientWidth - content_div.clientWidth)/2 "px"; <BR>var content_top = (main_div.clientHeight - content_div.clientHeight)/2 "px" <br>content_div.style.left = <br> content_div.style.top = content_top; <BR><BR>} <BR></script> <BR></body> <BR><br></style> </title> </div>