一些你不知道的让盒子居中于容器的方法

前两天给大家分享了使用定位让盒子脱离文档流，从而才能利用margin：auto使其居中，

今天来总结一下其他的一些方法：

demo1：定位+偏移(让box在Box内部水平垂直居中)

.Box { position : relative ; }

.box { position : absolute ; top : 50% ; left : 50% ; transform : translateX( - 50% ) ; translateY( -50% ) ; }

demo2：巧用display

    .Box {    display: table-cell ; vertical-align: middle; text-align: center;}        

    .box {display: inline-block}

demo3：弹性布局

.Box { display: flex; justify-content: center; align-items: center;}

个人也是比较喜欢利用这种方法；父盒子如上使用弹性布局后，内部元素全都会垂直水平居中。