欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  <!doctypehtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8"/>
 
  <metacontent="IE=8"http-equiv="X-UA-Compatible"/>
 
  <title>CSS垂直居中</title>
 
  <styletype="text/css">
 
  .container{
 
  width:500px;/*装饰*/
 
  height:500px;
 
  background:#B9D6FF;
 
  border:1pxsolid#CCC;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <h1>垂直居中(table)</h1>
 
  <div>
 
  <tablewidth="100%"height="100%">
 
  <tr>
 
  <tdvalign="middle">
 
  <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg"/>
 
  </td>
 
  </tr>
 
  </table>
 
  </div>
 
  </body>
 
  </html>
 
  好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSShack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法







本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56642.shtml