垂直居中的方法

图片居中：

 

 1 < style >
 2.box {}{
 3/**//*非IE的主流浏览器识别的垂直居中的方法*/
 4display: table-cell;
 5vertical-align:middle;
 6
 7/**//*设置水平居中*/
 8text-align:center;
 9
10/**//* 针对IE的Hack */
11*display: block;
12*font-size: 175px;/**//*约为高度的0.873，200*0.873 约为175*/
13*font-family:Arial;/**//*防止非utf-8引起的hack失效问题，如gbk编码*/
14
15width:200px;
16height:200px;
17border: 1px solid #eee;
18}
19.box img {}{
20/**//*设置图片垂直居中*/
21vertical-align:middle;
22}
23 </ style >
24
25
26 < h3 > 图片垂直居中的使用技巧 </ h3 >
27 < br >
28
29 < div  class ="box" >
30 < img  src ="xxx.gif"   />
31 </ div >

 

文字居中：

 

 1 < style  type ="text/css" >
 2* {}{margin:0; padding:0; border:0;}
 3#bg {}{margin:100px auto; width:500px; background:#FFCC00; line-height:200px; border:#FFCCFF 1px solid; text-align:center; vertical-align:middle; vertical-align:middle;}
 4 </ style >
 5
 6 < div  id ="bg" >
 7 < a  href ="#" > 111111111111 </ a >
 8 < a  href ="#" > 222222222222 </ a >
 9 < a  href ="#" > 333333333333 </ a >
10 </ div >