scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示

jQueryの>scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に初期表示してみます。

1.CSSの記述例

<style type="text/css">
<!--
#iBox{
	width:150px;
	height:150px;
	background-color:#09F;
	position:absolute;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var strid="#iBox";	//ボックスのid名
	$(strid).css("top", ($(window).height()-$(strid).height()) / 2+$(window).scrollTop()+"px");
	$(strid).css("left", ($(window).width()-$(strid).width()) / 2+$(window).scrollLeft()+"px");
});
</script>

3.HTMLの記述例

<h1>150×150のボックスをページの上下左右中央に表示</h1>



<div align="center">ブラウザサイズを変更した場合はページの更新(F5)を行って下さい。</div>



<div id="iBox"></div>


scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示デモ

CSSだけでも出来るかと思いますがJavaScriptでやってみました。
ブラウザサイズを変更すると上下左右中央では無くなりますが、ページ更新(F5)を行うかwindow.onresize的な処理を入れれば解消されるかもしれません。

※流用される場合は自己責任でお願いします。