今天主要谈一谈CSS中的各种居中的办法。 首先是[b]水平居中[/b]，最简单的办法当然就是 效果如下： [img]http://files.jb51.net/file_images/article/201507/2015728152249887.png?201562815233[/img] [b]transform居中[/b] 上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。 先上代码： 效果如下：  [img]http://files.jb51.net/file_images/article/201507/2015728152329026.png?2015628152339[/img] 首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。 再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0); 这个方法非常好用噢。 [b]flex居中[/b] 最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。 效果如下： [img]http://files.jb51.net/file_images/article/201507/2015728152412346.png?2015628152435[/img] 这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。 以上就是本文的全部内容，希望大家可以喜欢。