如何使div居中

今天要講的主要內容如題，**即如何在一個div中使其子div居中**。
我在網上其餘地方也看到過對其的不一樣實現方式，幾天主要作一個詳細的彙總，但願對你們有幫助。


假設父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都兼容，其餘瀏覽器沒測，目測是都兼容的。歡迎你們查漏補缺！