说到居中的问题，或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确，这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢？我们先来温习一下这些个属性值的用处。 text-align:center; 行内元素的水平居中显示； margin:0 auto; 固宽盒子在浏览器中的居中显示效果； vertical-align:middle; 行内元素的垂直居中显示； line-height:height; 针对于单行文字垂直居中显示； ==================================== HTML: <div class="A"> <div class="B">测试</div> </div> ---------------------------------- CSS: 第一种方法：（常用） .A{ position: relative;
height:500px; width:500px; background-color:#FF0000;} .B{ position: absolute; top:50%; left:50%;
height:250px; width:250px; background-color:#FFF; margin:-125px 0 0 -125px;
} 第二种方法： .A{ position: relative;
height:500px; width:500px; background-color:#FF0000; overflow:hidden;
} .B{ position: relative;
height:250px; width:250px; background-color:#FFF; margin:-125px auto 0; top:250px;
} 第三种方法：(IE有点问题) .A{ position: relative;
height:500px; width:500px; background-color:#FF0000; } .B{ position: absolute;
height:250px; width:250px; background-color:#FFF; margin:auto; top:0; left:0; bottom:0; right:0;
} 第四种方法：(用到CSS3,不考虑IE，只在火狐做了测试，其他可加前缀) .A{ position:relative;
height:500px; width:500px; background-color:#FF0000; display:-moz-box; -moz-box-pack: center; -moz-box-align:center;
} .B{height:250px; width:250px; background-color:#FFF;} 第五种方法：(IE6/7兼容) .A{ display:table-cell;
height:500px;width:500px;background-color:#FF0000; vertical-align: middle;text-align: center;
*font-size:438.6px;/*font-size的值为该父元素的高度除以1.14得到的值,即500/1010=438.6*/
} .B{ display:inline-block;
height:250px; width:250px; background-color:#FFF; *display:inline; *zoom:1;/*ie6/7实现inline-block*/
*vertical-align: middle;
font-size:12px;/*恢复正常字体大小*/
} 