不定宽高的盒子水平垂直居中的方法?

方法1:

div绝对定位水平垂直居中【margin 负间距】    这或许是当前最流行的使用方法。

div{

            width:200px;

            height: 200px;

            background:green;

            position: absolute;

            left:50%;

            top:50%;

            margin-left:-100px;

            margin-top:-100px;

        }

方法2:

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】

div{

            width: 200px;

            height: 200px;

            background: green;

            position:absolute;

            left:0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

方案3:

div绝对定位水平垂直居中【Transforms 位移】

div{

            width: 200px;

            height: 200px;

            background: green;

            position:absolute;

            left:50%;/* 定位父级的50% */

            top:50%;

            transform: translate(-50%,-50%); /*自己的50% */

        }

方案4:

flex弹性布局居中

.box{

             height:600px;

             display: -webkit-flex;

             display: flex;

             justify-content:center;

             align-items:center;

        }