垂直水平居中的四種方式

版權聲明： https://blog.csdn.net/Ivana_zyf/article/details/79382639

.parent{
height: 500px;
background: skyblue;
width: 500px;
}
.child{
width: 100px;
height: 100px;
background: #333;
}

已知元素高度

.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
margin-left: -50px;
top:50%;
margin-top: -50px;
}

元素高度未知

①絕對定位+margin：auto

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
    }

②彈性盒子

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

③div模擬表格盒子

   .parent{
        /*display: table;*/
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .child{
        display: inline-block;
    }

④CSS3實現

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);//相對於該元素本身
    }