Div在设置了浮动的情况下水平居中

自己布局的时候发现在设置了div为浮动后再去添加margin：auto属性是无效的；

测试一
首先简单布局一下，在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>

效果图：
在这里插入图片描述
测试二
根据例子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>

在这里插入图片描述
测试三
从上面例子可以看出只要不设置浮动，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单占一行
在这里插入图片描述
测试四
要想实现水平居中，在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>

在这里插入图片描述