css居中技巧
1 text-align: center;
只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。在IE6、7中能对任何元素进行水平居中。另外它是把属性应用给容器，对内部所有内容起作用，所以不是很好控制，但方法兼容大多数浏览器用到的也很多。
<body>
<div id="mid">
<table id="mid1">
<tr>
<td><input type="button" id="mid1_1" value="首页"/>
<input type="button" id="mid1_2" value="1"/>
<input type="button" id="mid1_3" value="2"/>
<input type="button" id="mid1_5" value="3"/>
<input type="button" id="mid1_6" value="4"/>
<input type="button" id="mid1_7" value="5"/>
<input type="button" id="mid1_8" value="6"/>
<input type="button" id="mid1_9" value="7"/></td>
</tr>
</table>
</body>
css：
<style type="text/css">
#mid1
{
padding: 0px;
margin: 0px;
width: 100%;
border:#000 solid 1px;
text-align: center;
}
</style>
这里有个新手技巧就是如果你想要你tabl内部的元素平均分布居中就应该将所有的元素分别放在td内部如：
<table id="mid1">
<tr>
<td><input type="button" id="mid1_1" value="首页"/></td>
<td> <input type="button" id="mid1_2" value="1"/></td>
<td> <input type="button" id="mid1_3" value="2"/></td>
<td> <input type="button" id="mid1_5" value="3"/></td>
<td> <input type="button" id="mid1_6" value="4"/></td>
<td> <input type="button" id="mid1_7" value="5"/></td>
<td> <input type="button" id="mid1_8" value="6"/></td>
<td> <input type="button" id="mid1_9" value="7"/></td>
</tr>
</table>
2单div对象布局居中的实现，对div盒子设置margin:0 auto样式即可实现居中。这个也是元素居中的首选，但是div必须设置宽度。大多数主流浏览器中，这种方法都非常有效和IE浏览器版本6.0以上支持。
div#container{margin-left:auto; margin-right:auto; width:200px;}
3使用绝对定位然后负相当于元素宽度一半的外边距让元素相对于页面居中
#container{background:#cf6; width:600px; position:absolute; left:50%; margin-left:-300px; }
4使用浮动或绝对定位配合相对定位负元素宽度一半左定位居中。需要在外面多套一个div来装需要居中的元素，使他相对于父元素居中50%，但多出了居中元素的一半，然后设置居中元素负相对于多加的空div就是本身的宽度的一半定位，这样元素就居中了
<style type="text/css">
#y1{float:left;position:relative;left:50%;}
.y2{background:#6cf;position:relative;left:-50%;} </style>
<div id="y1">
<div class="y2">我就是即将居中的元素哈哈哈哈</div> </div>
5line-height让单行文字居中
把文字的line-height设置为父容器的高度。
6使用表格居中，默认表格就会对内容垂直居中，可以直接使用align：center；水平居中 valign：middle；垂直居中。才css中使用vertical-align：middle；可以实现垂直居中。
<table>
<tr>
<td width="200px" height="200px" style=" border:1px solid #f00; vertical:middle; text-align:center;">
<div style="width:100px; height:100px; background:#000;"></div>
</td>
</tr>
</table>
7使用diplay：table-cell，模拟表格，使用表格的居中方法
<div style="display:table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; border:1px solid #f00;">
<div style="width:50px; height:50px; background:#6cf; display:inline-block"></div>
</div>
文章参照：http://www.cnblogs.com/2050/p/3392803.html
