# css控制div垂直且水平的方法（不常用但是却很有效的）

忍无可忍，无需再忍，自己曾经走过的坑，给后来小伙伴填上哦，那些div居中的方法总结。

- 1.父级元素display:table-cell;vertercal-align:middle;子级margin:0px auto;//上代码！(注意只兼容ie8和ie8以上浏览器)

html部分 ：<div id="content">
           <div class="center">你好</div>
        </div>
css部分：#content{
                 width:800px;height:500px;
                display:table-cell;vertical-align: middle;
                border:1px solid #f80;
                }
     #content .center{
                  border:1px solid #f80;width:100px;
                  height:100px;margin:0px auto;
      }

---

• 2.利用绝对定位position。以及top，left，right，bottom，margin：auto；zoom:1;等属性//直接上代码!（兼容ie8和ie8以上浏览器！）

html部分 ：<div id="content">
           <div class="center">你好</div>
        </div>
css部分：#content{
                 width:800px;height:500px;position:relative;
                border:1px solid #f80;
                }
     #content .center{
                  position:absolute;top:0px;left:0px;right:0px;
                  bottom:0px;margin:auto;zoom:1;//zoom是用来兼容ie8以下的
                  border:1px solid #f80;width:100px;
                  height:100px;
      }

3.利用css3 transform属性，绝对定位，以及定位top,left属性！（兼容ie8以上）

html部分 ：<div id="content">
           <div class="center">你好</div>
        </div>
css部分：#content{
                 width:800px;height:500px;position:relative;
                border:1px solid #f80;
                }
     #content .center{
                  position:absolute;top:50%;left:50%;
                  transform:translate(-50%,-50%);
                  border:1px solid #f80;width:100px;
                  height:100px;
      }

我走过的坑，不希望后来小伙伴再走！路过小伙伴觉得文章有用不吝啬给攒啊！或者关注一波！你懂得！