CSS居中的常用手段

文字居中

水平：text-align:center; 只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中

垂直：设置line-height值与父元素高度值相同

块元素居中

水平：margin:0 auto; 此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效

垂直：设置line-height值与父元素高度值相同，适用于只有一行文字的情况

定位居中

父元素设置position:relative
子元素设置position:absolute
子元素的位置以父元素为参照物，用left right top bottom等属性定位。

注意：设置绝对定位之后如果没有内容宽度会自动清零，会看不到任何东西，所以要将宽度设置出来

使用表格

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align=”center” 以及
valign=”middle”
这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用
vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。