水平垂直居中方法 flex和table-cell区别 父盒子使用定位 水平方向、垂直方向上是否受到影响？

垂直居中方法

适用于父盒子为块级元素（div）、子盒子为块级元素（div）；父盒子为块级元素（div）、子盒子为行内块元素（span）；父盒子为块级元素（div）、子盒子为内联元素（img）；

#### 适用于父盒子为块级元素（div）、子盒子为块级元素（div）；父盒子为块级元素（div）、子盒子为行内块元素（span）；父盒子为块级元素（div）、子盒子为内联元素（img）；

.father {

        height: 500px;
        width: 500px;
        background-color: pink;
        
        <!--方法一：给父级元素添加flex-->
        display: flex;（父元素使用定位也不影响水平垂直居中）
        justify-content: center;
        align-items: center;
        
         <!--方法二：给父级元素添加table-cell-->（如果父元素使用了定位，则 vertical-align: middle垂直方向的垂直居中不发生作用）
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    
    }
    
    
    .sun {
    <!--父绝子相，给子元素添加相对定位，先把top、bottom、left、right设置为0；然后直接使用margin：auto；-->（块级元素可以使用，行内不行）
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }