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; 
    }