CSS布局居中
1、把margin设置为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
代码：
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ background-color: red; width: 150px; height: 150px; } #div2{ background-color: black; width: 70px; height: 70px; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
2、效果图同上
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
代码：
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ background-color: red; width: 150px; height: 150px; text-align: center; } #div2{ background-color: black; width: 70px; height: 70px; display: inline-block; } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
3、使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4、使用表格：table
如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
5、使用display:table-cell来居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
代码：
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ border: 1px dashed red; width: 150px; height: 150px; display: table-cell; /*控制水平居中*/ text-align: center; /*控制垂直居中*/ vertical-align: middle; } #div2{ background-color: black; width: 70px; height: 70px; display: inline-block; } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。
6、使用绝对定位来进行居中
效果图1：
代码1：
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ border: 2px dashed red; width: 150px; height: 150px; position: relative; } #div2{ background-color: black; width: 70px; height: 70px; position: absolute; /** * top、和left的计算问题 * (152-70)/2=35 */ top: 41px; left: 41px; } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
效果图2：
代码2：
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ border: 2px dashed red; width: 110px; height: 110px; position: relative; } #div2{ background-color: black; width: 70px; height: 70px; position: absolute; /** * margin-top、和margin-left的计算问题 * -70/2=-35 */ left: 50%; top: 50%; margin-left: -35px; //子元素宽度负的一半 margin-top: -35px; //子元素高度负的一半 } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。
7、另一种使用绝对定位来居中的方法
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：
效果图
代码:
<style type="text/css"> body{ margin: 0; padding: 0; } #div1{ border: 2px dashed red; width: 110px; height: 110px; position: relative; } #div2{ background-color: black; width: 70px; height: 70px; position: absolute; /** * 此方法只适用高度宽度固定的 */ /*left、right必须配对出现控制水平方向*/ left: 0; right: 0; /*top、bottom必须配对出现控制垂直方向*/ top: 0; bottom: 0; /*下面这句也是必不可少的*/ margin: auto; } </style> </head> <body> <div id="div1" class="classname"> <div id="div2" class="classname"> </div> </div> </body>
这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
8、使用浮动配合相对定位来进行水平居中
此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：
http://www.cnblogs.com/2050/p/3392803.html
