水平垂直居中方法

Posted 2020-12-06 xjt31

垂直居中方法

适用于父盒子为块级元素（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-->
        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;
    }