如何在一个div中使其子div居中

差不多先生img

假设父div的类名为father，子div的类名为son。在html中的形式如下：

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

接下来用css设置son居中的方法主要有4种。

方法一（使用子元素绝对布局）： translateY(-50%)也可以用

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

方法二（使用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; /*这句话一定要加，不然没效果哦 */
    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; 
}