如何使div居中

Posted 2020-10-20 迪恩杰

今天要讲的主要内容如题，**即如何在一个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都兼容，其他浏览器没测，目测是都兼容的。欢迎大家查漏补缺！