让元素水平垂直居中的几种方式

让元素水平垂直居中的几种方式

平时我们做项目的时候很多情况会遇到让元素水平垂直居中的场景，可能场景不同，所以需要用不同的方式，下里面是可以实现的6种方式和他们的使用场景。

列如有个设定好的div,下面是他的样式

定位的话分为3种也可以说是三种情况，都是依赖于定位实现的。

1.定位

（1） 缺点：需要具体宽高的情况下使用

 .box{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        } 

（2）不需要知道具体宽高的情况下，但是必须得有宽高

.box{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
     } 

（3） 也不需要有宽高，但是必须有内容撑开就好，缺点：css3的兼容性问题，