<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><html> ; <br><head> <br><meta charset="utf-8" /><BR><title><br><style> *外側 レイヤー div は中央に配置されます*/ <br>#main { <br>position: 絶対的; /*非常に重要*/ <br>background-color: blue:400px; <br>height:200px; ; <br> /*left:50%; <br>top:50%; <br>margin-top:-100px;*/ <br>border:1px ; <br> } <br><br>#content { <br>位置: 絶対的; /*非常に重要*/ <br>幅: 200px; <br>高さ: 100px; <br>/ *left:50%; <br>top:50%; <br>margin-top:-50px;*/ <br><br>/*テキストdiv 内は中央に配置されます*/ <br>text-align: center; <br>line-height:100px; /*行間隔は div の幅と同じです*/ <br>} <br></style> ; <br><body> <br><div id="content"> ;/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"); (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 = content_left; content_div.style.top = content_top; <br><br>} <br></script> <br></html></div>