DIVの垂直中心

divの垂直中心はTableよりずっと複雑で、これまでどのcss属性がdivに直接中心を実現できるかは見つかっていません.例えば、私たちが知っているvertical-alignは、Tableに対して簡単に垂直中心を実現することができますが、divを直接使うことはできません.いくつかのテクニックでしか実現できません.1、単行テキストの実装には、いくつかの方法があります.最も簡単な方法は、line-heightとdivのheightを同じに設定することです.2、複数行のテキストに対してdivのheightが伸縮可能である場合、最も簡単な方法はdivのpaddingを上下に等しく設定し、中央に見えるようにすることです.3、複数行のテキストに対して、divには固定height、つまり私たちが通常要求する垂直中央があり、比較的面倒で、以下にネット上で検索するコードを貼ります:css部分:

div#main {
   display:table;
   background:#CCCCCC;
   width:500px;
   height:500px;
   position:relative;
   overflow:hidden;
}
div#min {
   vertical-align:middle;
   display:table-cell;
   position:absolute;
   top:50%;
}
div#content {
   position:relative;
   top:-50%;
}

div部分:のようないくつかの中央法は効果的に実現されたが、使用するとどうも柔軟ではなく、expressionの使用方法の例を紹介する上で、もう一つの良い中央法がある.
プログラムで使用したdivはtd要素で、その設定方法は次のとおりです.
 

 <td  width="200" height="200"  nowrap >
     <div  style='float:left;padding-top:3;padding-bottom:3;font-size:40px;background-color:red'>  </div>
 </td>

  
つまりpadding-top、padding-bottomでギャップを設定し、DIVの文字が垂直に中央に見えるようにします.私の理解では、DIVの高さはpadding-top+padding-bottom+font-sizeによって決定され、彼らが加えたものとTDの高さ以上であれば、感覚的には中央にあるが、実際にはそうではない.padding-top、padding-bottomを設定すれば、どんなに高いTDを設定してもDIVは中央にあるが、DIVの高さは確かにpadding-top+padding-bottom+font-sizeによって決定される.CSSではpadding-topとpadding-bottomがどのように機能するかは、まだ検討されています.