居中是我们在使用CSS进行布局时经常遇到的一种情况。使用css居中的时候，有时候一个属性就可以搞定，有时候需要一定的技巧才能兼容所有的浏览器。本文将简要介绍一些常用的居中方法。注：如无特殊说明，本文介绍的方法均兼容IE6+、谷歌、火狐等主流浏览器。下面我说说一些简单的对人畜无害的定心方法。1.将边距设置为自动。具体来说，将要居中的元素的margin-left和margin-right设置为auto。此方法只能水平使用。居中，对浮动或绝对定位的元素没有影响。2.使用text-align:center没什么好说的。您只能水平居中内联元素，例如图片、按钮和文本（displayisinline或inline-block等）。但需要注意的是，在IE6和7这两款出色的浏览器中，它可以让任何元素水平居中。3.使用line-height使单行文本垂直居中。将文本的line-height设置为文本父容器的高度，适用于只有一行文本的情况。4.使用表格如果你在使用表格，你完全不用担心各种居中问题，只需要使用td（也许还有th）元素的align="center"和valign="middle"即可两个属性可以完美处理其中内容的水平和垂直居中，表格默认会将其中的内容垂直居中。如果要在CSS中控制表格内容的居中，可以使用vertical-align:middle来实现垂直居中。至于水平居中，CSS中好像没有相应的属性，但是在IE6和7中我们可以使用text-align:center来让表格中的元素水平居中，IE8+、Google、Firefox的text-align:center而其他浏览器仅适用于行内元素，不适用于块元素。在ie6和7中，可以使用css的text-algin来控制表格内容的水平对齐方式，不管内容是行内元素还是块元素。但是ie8+、chrome、firefox等浏览器中的text-align:center对块状元素无效，只能使用表格的align属性。5、使用display:table-cell居中对于那些不是表格的元素，我们可以使用display:table-cell将其模拟成表格单元格，这样我们就可以使用表格方便的居中特性。例如：但是，该方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7无效。里面提到的方法都是很基础的方法，自然不能称之为高招。下面说说一些需要一定技巧的定心方法。6.使用绝对定位进行居中。此方法仅适用于我们已知其宽度或高度的元素。绝对定位居中的原理是将绝对定位元素的left或top属性设置为50%。此时元素没有居中，而是元素的宽度或高度在居中位置的右边或左边。一半的距离，所以你需要使用一个负的margin-left或margin-top值来将它拉回到中心位置，这个负的margin值占据了元素宽度或高度的一半。运行效果：如果只想实现一个方向的居中，只能使用left,margin-left实现水平居中，使用top,margin-top实现垂直居中。7、另一种使用绝对定位居中的方法这种方法也只适用于我们已经知道其宽高的元素，遗憾的是它只支持IE9+、Google、Firefox等符合w3c标准的现代浏览器。下面用一段代码来理解这个方法：运行效果：如果这里没有定义元素的宽高，那么它的宽由left和right的值决定，高为由top和bottom的值决定。所以你必须设置元素的高度和宽度。同时，如果改变left、right、top、bottom的值，也可以让元素向某个方向移动。你可以自己试试。8、使用浮动和相对定位水平居中这种方法也是解决浮动元素如何水平居中的方法，我们不需要知道需要居中的元素的宽度。浮动居中的原理是：将浮动元素相对于父元素宽度的50%定位，但是此时元素并没有居中，而是自身宽度比居中位置的一半，然后需要inside子元素的子元素使用相对定位，将自身多出的一半宽度拉回来，而由于相对定位是相对自身定位的，自身宽度的一半只需要设置为left的50%或正确知道了，所以你不需要知道你的实际宽度是多少。这种使用浮动和相对定位居中的方法的好处是不需要知道要居中的元素的宽度，即使宽度是不断变化的；缺点是你需要一个额外的元素来包裹要居中的元素。看代码：运行效果：9.使用font-size实现垂直居中如果知道父元素的高度，就可以使用这个方法让里面的子元素水平和垂直居中，子元素的宽度不需要知道元素或高度。此方法只对IE6和IE7有效。该方法的要点是为父元素设置一个合适的字体大小值。这个值的值是父元素的高度除以1.14得到的值，子元素必须是inline或者inline-block元素。添加垂直对齐：中间属性。至于为什么除以1.14而不是其他数字，没有人真正知道，你只需要记住1.14这个数字即可。方法5中说display:table-cell在目前的IE8+、Firefox、Google等浏览器中都可以用于居中，而这里的font-size方法适用于IE6、IE7，所以结合这两种方法吧将兼容所有浏览器：在上面的例子中，由于要居中的元素是块元素，我们还需要将其转为内联元素。如果要居中的元素是图片等行内元素，这一步可以省略。另外，如果vertical-align:middle写在父元素而不是子元素中，这也是可以的，但是计算font-size时使用的1.14的值应该改为1.5左右的值。以上是一些常用的对中方法，如有遗漏或错误，敬请指正！
