Question

CSS实现水平垂直居中的几种方法介绍

Answer 1

不用给你多种方法了，自从我知道一种方法后就懒得用其他方式来实现水平垂直居中了，这种方法最大的优点就是可以宽度高度自适应，当然，设置固定宽高也可以；

<div style="position:absolute;left:50%; top:50%; transform:translate(-50%,-50%);">内容内容</div>

如果是水平垂直居中与某个div，那么在父级上加一下position:relative;即可

另外再介绍一个特殊的水平居中方法，就是利用table中td默认为垂直居中的特性，把div放入td中再设置水平居中即可

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style=" height:500px; background:red;">
   <div style="text-align:center; background:blue; width:300px; margin:0 auto;">内容内容</div>
  </td>
 </tr>
</table>

其他方法也懒得多说了，局限性太强，其实通常你全部使用第一种方法就足够你实现所有效果了