CSSで層の垂直中央を実現する

「かつてぼんやりしていたWEB互換性の問題の回顧」では、「パーセンテージ絶対位置決めを使用することで、外部パッチの負の値との方法で、負の値の大きさは自身の幅の高さの半分になる」という方法で、層を垂直に中央に置く効果があると述べています.

div.innerbox {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red
}

このCSSでは、ブラウザで階層を垂直方向に中央に配置することができます.innerBoxを親階層に対して垂直方向に配置するには、親階層のCSSを次のように設定します.

div.outbox {
    width:400px;
    height:400px;
    border:1px solid #f00;
    position:relative
}

しかし、「負の値の大きさは、自身の幅の高さの半分」という原理は、実際の応用面を制約している.InnerBoxのmarginとwidth,heightとの制約関係により,動的変化innerBoxの内容による高度な変化はmarginに反映されず,JS動的制御を用いない限り,JSは言うまでもなく,この原理で実現される垂直中心はinnerBoxの高幅属性が固定値である場合にのみ用いられる.InnerBoxのコンテンツのダイナミックな変化を実現しても垂直に中央に保つには、次の

.outBox2 {display: table; height: 400px; width:600px;  #position: relative; overflow: hidden;background:#FFCCCC; border: 1px solid #d00;}
.midBox2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
.innBox2 {#position: relative; #top: -50%; width:300px; margin:0 auto}

Html構造は以下の通りである.

 <div class="outBox2">
     <div class="midBox2">
         <div class="innBox2" style="border:1px solid #c00">
             <br>
                  <br>
                   
                  <br>
                   
     div>
 div>