css3中居中對其的4種方法~

html：
這裏設置父類爲father；子類爲son；

<div class="father">
       <div class="son">
</div>

js：

1. 方法一（使用絕對佈局）： .father{ 
    width:500px; 
    height:500px; 
    position:relative; 
    background-color:red; 
    } 
    .son{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-100px; 
    margin-left:-100px; 
    background-color:black; 
    } 
    
    
    2. 方法二（使用table-cell形式） .father{ 
    width:500px; 
    height:500px; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
    background-color:red; 
    } 
    .son{ 
    width:200px; 
    height:200px; 
    display:inline-block; ps：這句話必定要加，否則沒效果哦 
    background-color:black; 
    } 
    
    3.方法三（使用彈性佈局flex） .father{ 
    width:500px; 
    height:500px; 
    display:flex; 
    justify-content:center; //內容水平居中 
    align-items:center; //內容垂直居中 
    background-color:red; 
    } 
    .son{ 
    width:200px; 
    height:200px; 
    background-color:black; 
    } 
    
    4.方法四（使用絕對佈局） .father{ 
    width:500px; 
    height:500px; 
    display:relative; 
    background-color:red; 
    } 
    .son{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
    background-color:black; 
    }