自己布局的时候发现在设置了div为浮动后再去添加margin：auto属性是无效的； eg1： 首先简单布局一下，在body里面添加两个div，一个父div(div_box),一个子div (div1)，div1设置浮动并且设置margin：auto代码如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .div_box { margin: 0 auto; border: 1px solid red; width: 200px; height: 200px; } .div1{ float:left; margin: 0 auto; border: 1px solid black; width: 25%; height: 10%; } </style> </head><body> <div class="div_box"> <div class="div1"></div> </div> </body> </html>效果图p1：
eg2: 根据例子eg1，我们把浮动取消试试 代码如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .div_box { margin: 0 auto; border: 1px solid red; width: 200px; height: 200px; } .div1{ /* float:left;*/ /* 去除浮动*/ margin: 0 auto; border: 1px solid black; width: 25%; height: 10%; } </style> </head><body> <div class="div_box"> <div class="div1"></div> <div class="div1"></div> </div> </body> </html>效果图p2： eg3： 从上面例子可以看出只要不设置浮动，div只要设置margin：auto就可以实现居中，那如果要让两个div并排并且都居中呢，先来试一下在添加一个
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .div_box { margin: 0 auto; border: 1px solid red; width: 200px; height: 200px; } .div1{ /* float:left;*/ /* 去除浮动*/ margin: 0 auto; border: 1px solid black; width: 25%; height: 10%; } </style> </head><body> <div class="div_box"> <div class="div1"></div> <div class="div1"></div> </div> </body> </html>效果图p3：由于没有设置浮动，div单占一行 eg4 要想实现水平居中，在div外嵌套一个居中div，然后再在居中的div里添加两个浮动的div
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .main { margin: 0 auto; border: 1px solid red; width: 200px; height: 200px; } .main2 { position: relative; margin: 0 auto; border: 1px solid black; width: 25%; height: 10%; } .white { float: left; background: yellow; width: 50%; height: 100%; } .pink { float: left; background: pink; width: 50%; height: 100%； } </style> </head> <body> <div class="main"> <div class="main2"> <div class="white">white</div> <div class="pink">pink</div> </div> </div> </body> </html>效果图
