cssで画面の中央に表示する。

メモ。
cssでブラウザのウィンドウの中央に表示する。
仕組みとしては、ボックスを作ってそれをただ中央に表示しているだけ。
背景をそれぞれ設定しているので、コピペすると分かりやすいかも。
背景を全体に設定するときは、cssのbody要素にのみ設定するだけで良いみたい。

html

<div class="centerMiddle">
　　ボックスを画面中央に表示する。
</div>

css

html,body{
	hight: 100%;	/*高さを100％に設定*/
}

body{
	margin: 0;
	padding: 0;
	positiion: relative;
	min-width: 600px;	/*中央配置するボックスの横幅*/
	min-height: 400px;	/*中央配置するボックスの縦幅*/
	background-color:#00bfff;
}

.centerMiddle{
	margin: -200px 0 0 -300px; 	/*縦横半分をネガティブマージンでずらす*/
	position: absolute; 	/*body要素に対して絶対配置*/
	top: 50%;		/*上端を中央に*/
	left: 50%;		/*左端を中央に*/
	width: 600px;	/*横幅*/
	height: 400px;	/*縦幅*/
	background-color:#00ff00;
}