水平居中

#layout  {text-align: center;}
#center { margin-left: auto; margin-right: auto; }

垂直居中

一、单行内容的居中

只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

    line-height:35px;height:35px;overflow:hidden;

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持等的居中

要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

二、多行内容居中，且容器高度可变也很简单，给出一致的 padding-bottom 和 padding-top 就行

    #nav li{float:left;margin:0 10px;padding-top:10px;padding-bottom:10px;}

二、利用line-height和text-align:center结合

    #nav li{float:left;margin:0 10px;line-height:30px; text-align:center;}

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack表现形式

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTM[1]L头部引用(if IE)Hack：针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在前面。

各种浏览器专属hack

• IE6 和 IE7

#hack{background-color:red;*background-color:green;}

• IE6

#hack{background-color:red;_background-color:green;}

• IE7

#hack{background-color:red;*background-color:green !important;}

注：!important 对IE6不起作用，但是IE7，IE8，IE9，FF，Chrome都支持，* 加 !important 可以唯一确定是IE7