網上其他地方已講述過對其的不同實現方式，今天主要做一個詳細的彙總，希望對大家有幫助。
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都相容，其他瀏覽器沒測，目測是都相容的。歡迎大家查漏補缺！