1、水平居中

　　1）文本、图片等行内元素的水平居中

　　给父元素设置text-align:center；

　　2）确定宽度的块级元素的水平居中

　　设置margin-left:auto和margin-right:auto；

　　3）不确定宽度的块级元素的水平居中（3种方法）

　　法一 将要居中的元素包含在table标签内，对table设置margin-left:auto和margin-right:auto。

　　说明：table标签本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”。

　　缺点：增加了无语义标签，加深了标签的嵌套层数。

　　法二 改变块级元素的display为inline，然后使用text-align:center来实现居中

　　优点：不用增加无语义标签，简化了标签的嵌套深度。

　　缺点：将块级元素变成了行内元素，会带来一些限制。因为行内元素比起块级元素缺少一些功能。

　　法三 给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。

　　优点：保留块级元素仍以display:block的形式显示，而且不会添加无语义标签，不增加嵌套深度。

　　缺点：设置了position:relative，带来一定副作用。

　　2、垂直居中

　　1）父元素高度不确定的文本、图片、块级元素的垂直居中

　　给父元素设置相同的上下边距。

　　2）父元素高度确定的单行文本的垂直居中

　　通过给父元素设置line-height来实现，其中line-height值和父元素的height值相同。

　　3）父元素高度确定的多行文本、图片、块级元素的垂直居中

　　设置vertical-align:middle;

　　问题：只有当父元素为td或者th时，该属性才会生效，对于其他块级元素，例如div、p等，默认情况下不支持vertical-align属性。

　　解决办法：

　　在FireFox和IE8下，可以设置块级元素的display:table-cell，来激活vertical-align属性。

　　对于不支持display:table-cell的IE6和IE7，有两种方法。

　　法一 可以直接使用表格。

　　优点：很好的实现垂直居中效果，且不会带来任何样式上的副作用。

　　缺点：添加了无语义标签，并增加了嵌套深度

　　法二 使用特定格式的hack。父元素设置position:absolute;top:50%，子元素设置position:relative;top:-50%。

　　优点：没有增加无语义标签

　　缺点：使用了hack, 需要设置position:relative和position:absolute，带来了副作用。