父元素：text-align:center;
div子元素：marign:0px auto;
通过在当前元素使用margin:0px auto可以实现当前元素在父元素中的水平居中效果。
通常情况下text-align:center是用作将文本水平居中的，如果让一个div水平居中，一般要使用margin:0px auto这段代码，这个对于有开发经验的前端人员没有任何问题，但初学者往往会出现使用text-align:center来实现div水平居中的情况，并且还会得出这样的结论:有的浏览器可以有的浏览器不可以。下面就看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>为什么text-align:center无法将div水平居中-蚂蚁部落</title> <style type="text/css"> div{ width:200px; height:200px; background-color:green; text-align:center; } #children{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div style="text-align:center;"> <div id="children"></div> </div> </body> </html> 以上代码的初衷是想让子元素在父元素中水平居中，这个在IE7和IE7以下浏览器中是可以的，但是在IE8和和IE8以浏览器或者其他标准浏览器中是没有任何效果的。text-align:center一般是用来规定文本和内联元素的水平居中对齐，如果想要让块级水平居中对齐，一般使用margin:0px auto来实现，代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>为什么text-align:center无法将div水平居中-蚂蚁部落</title> <style type="text/css"> div{ width:200px; height:200px; background-color:green; } #children{ width:100px; height:100px; background-color:red; margin:0px auto; } </style> </head> <body> <div style="text-align:center;"> <div id="children"></div> </div> </body> </html> 以上代码通过在当前元素使用margin:0px auto可以实现当前元素在父元素中的水平居中效果。
