如何在一个div中使其子div居中
网上其他地方已讲述过对其的不同实现方式，今天主要做一个详细的汇总，希望对大家有帮助。
ps：我面试的时候就被问到过这个问题，当时都回答错了，蓝瘦。
假设父div的类名为father，子div的类名为son。在html中的形式如下：
接下来用css设置son居中的方法主要有4种。
方法一（使用绝对布局）：
.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; 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都兼容，其他浏览器没测，目测是都兼容的。欢迎大家查漏补缺！