2019-07-29 非浮动，浮动的盒子居中方法

非浮动盒子居中的方法：

   

       

   

浮动盒子居中的方法：

.box1 {

            width: 400px;

            height: 400px;

            background: yellow;

            float: left;

            position: relative;

        }

.box2 {

            width: 200px;

            height: 200px;

            background: red;

            float: left;

            position: absolute;

            top:50%;

            left:50%;

            transform: translate(-50%,-50%)

        }

小结： 

不浮动盒子居中常用的两种方法：

方法一、父盒子：display：flex；justify-content：center；align-items:center。

方法二、父盒子：display：table-cell；vertical-align：middle；text-align：center。

               子盒子：margin：0  auto；

浮动的盒子居中的方法：

子绝父相    父盒子：position：relative；

                   子盒子：position：absolute；top：50%；left：50%；

                                 transform：translate（-50%，-50%）