关于居中问题

涉及到居中问题，大家首先想到的肯定是margin、text-align、vertical-align这些，然而这些具体是怎么回事呢？通过css实现元素的居中，主要有以下几种方法：

水平居中

1.margin：0  auto

实际上是把元素的margin-left、margin-right均设为0，将元素进行水平居中，但是此方法对浮动元素及绝对定位元素无效。

2.text-align：center

这个属性作用如字面意思，实现了水平居中，只针对图片、按钮、文字等行内元素（display为inline或inline-block等），但是在IE6、7浏览器中，能够实现任何元素的水平居中。

3.浮动元素相对定位

把浮动元素相对定位到父元素宽度50%的地方，但此时比居中的位置多出自身的宽度，这就需要他里面的子元素（即居中元素）再用一个相对定位，把多出的宽度抵消。由于相对定位是相对于自身原来的文档流，只需把自身宽度的一半设为left或right即可。

此方法优点是无需知道居中元素的宽度，缺点是需要一个多余的元素来包裹居中元素。

代码如下：

运行效果：

垂直居中

1.inline-height

将inline-height设为文字父元素的高度，可让单行的文字垂直居中。

当当当！接下来重点来了~

完全居中

1.position：absolute

通过绝对定位进行居中，通过设置left、right、top、bottom实现居中，比较简单，在此就不细讲啦

2.table

只要将td元素的align设为center，valign设为middle就可以实现内容的水平居中与垂直居中。

3.display：table-cell

对于不是表格的元素，可以通过设置父元素的display：table-cell把该元素模拟成一个表格单元格，并将设置text-align：center、vertical-align：middle，子元素属性设置display为inline-block等行内元素，如此就可以实现水平与垂直居中了。代码如下：

运行效果：

4.margin与position等

居中元素属性设置margin：auto、position：absolute、top：0、right：0、bottom：0、left：0，即可以实现元素的绝对居中啦。

运行效果：

此方法有以下优点：

Ø  兼容性较好（无需hack，兼容IE8+）

Ø  无特殊标记，样式更精简

Ø  自适应布局，可以使用百分比和最大最小高宽等样式

Ø  居中时不考虑元素的padding（也不需要使用box-sizing属性）

Ø  布局块可自由定义大小

Ø  Img图像也适用

但同时得注意：

Ø  必须声明元素高度

Ø  推荐设置overflow：auto，避免元素溢出导致显示不正常

Ø  这种方法在Windows phone上不起作用

Ø  对于容器内元素居中，则需设置容器position：relative

这些应该是常见的几种居中方法了，每个方法都有适用的场景，不全面的或者有疏漏之处，敬请指正哈。