如何实现子盒子水平和垂直居中？

盒子水平、垂直居中

（1）定位

方式一：（一定要知道子盒子具体宽高）

给父盒子设置为：position: relative

给子盒子设置为：position: absolute；top：50%；left：50%；margin-top：-25px；

margin-left：-25px；

方式二：（子盒子一定要有宽高，但是不必知道具体多少）

给父盒子设置为：position: relative

给子盒子设置为：position: absolute；top：0；left：0；right:0；bottom：0；margin：auto；

方式三：（不需要子盒子有宽高，但是此方法兼容性不好）

给父盒子设置为：position: relative

给子盒子设置为：position: absolute；top：50%；left：50%；transform：translateX（-50%）；transform：translateY（-50%）；

（2）利用伸缩盒的方式：当普通盒子被调整为伸缩盒后，要让子盒子水平垂直居中，就得给父盒子设置为：display：flex；justify-content：center；align-items：center；

（3）利用JS的方式

（4）将显示方式设置为表格

.father{

    display: table-cell;

    vertical-align: middle;//控制文本垂直居中

    text-align: center;//控制文本水平居中

    width: 500px;

    height: 600px;//必须要有固定宽高

}

.son{

    display:inline-block;

}