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

网上其他地方已讲述过对其的不同实现方式，今天主要做一个详细的汇总，希望对大家有帮助。
ps：我面试的时候就被问到过这个问题，当时都回答错了，蓝瘦。

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

<div class="father">

<div class="son">

</div>

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

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;

}
   
   效果如上

这是目前我所了解的4种方法，ie和chrome都兼容，其他浏览器没测，目测是都兼容的。欢迎大家查漏补缺！