css垂直居中的幾種方式

不定寬高

position: relative/absolute、translate

• 兼容性
  • ie9+
• 代碼實現

.parent {
        position: relative;
        width:100%;
        height:100%;
    }
    
    .chirld {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

複製代碼

flex佈局

• 兼容性
  • ie10+
• 代碼實現

.parent {
    display:flex;
    justify-content:center;
    align-items:center
 }
複製代碼

before僞元素

定寬高

position: fixed

• 兼容性
  • ie7+
• 代碼實現

.parent {
        position: fixed;
        width: 100px;
        height: 100px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;
    }
複製代碼