div下子div水平垂直居中

网上其他地方已讲述过对其的不同实现方式，今天主要做一个详细的汇总，希望对大家有帮助。

ps：我面试的时候就被问到过这个问题，当时都回答错了，蓝瘦。

 

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

<div class="father">

       <div class="son">

  </div>

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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都兼容，其他浏览器没测，目测是都兼容的。欢迎大家查漏补缺！

方法3好用