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;
}