垂直居中的方法
图片居中：
1
<style>
2
.box {
3/*非IE的主流浏览器识别的垂直居中的方法*/
4
display: 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>
<style>
2
.box {
.box 3
/*非IE的主流浏览器识别的垂直居中的方法*/4
display: table-cell;5
vertical-align:middle;6
7
/*设置水平居中*/8
text-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
15
width:200px;16
height:200px;17
border: 1px solid #eee;18
}19
.box img {20
/*设置图片垂直居中*/21
vertical-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>
<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>