CSS布局是前端开发人员开发人员必备的知识,而有关于水平垂直居中在我们的开发过程中也是最常见的,网上整理归纳的各种情况下的水平垂直居中的文章很多,自己也看了很多,但每次遇到比较复杂的情况时还会去翻一遍之前收藏的文章,找到对应的情况,找到解决的办法,写这篇文章的目的也是想彻底过滤一遍有关方面的知识,牢牢掌握一下,减少查阅文档的时间.
1.单行文本的水平垂直居中
2.多行文本的水平垂直居中
3.盒模型的水平垂直居中
padding填充
需要知道容器宽高
margin填充
4.absolute布局上下文下的水平垂直居中
主要原理就是利用left：50%将盒子的左边先置于父容器的中点，然后再将盒子往左偏移盒子自身宽度的50%，这里有三种具体实现：
上面三个方法中，margin方法和relative方法都需要知道元素的宽高才行(relative方法只知道高也行)，适用于固定式布局，而transform方法则可以不知道元素宽高.
相同原理还有一种方法,多用来做遮罩窗
适用于图片居中的网易nec的一种方法
这种方法主要是利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，如果是不使用nth-child选择器的花，IE6都是能顺利兼容的.但是要注意p的区域问题.
5.float布局上下文下的水平垂直居中
实现原理:首先是利用float属性将需要居中的元素的父元素.ele的宽度收缩，然后left:50%将.ele的左边和水平中线对齐，这个时候还没居中，还需要将其往回拉自身宽度的50%，于是.ele-inner便是真正需要水平居中的元素，我给它一个position:relative，将其往回拉自身宽度50%就行了。对于垂直方向，依然是先将.ele top:50%到垂直方向中点，但是这时给.ele-inner top:50%是不起作用的，因为如果没给父元素明确高度的话，这个50%是计算不出来的，因此，就有了transform : translate3d(0, -50%, 0)。
这种方法的好处是元素可以不定宽，任何时候都可以做到居中.
这种方法是先让占位元素.placeholder占据50%高度，然后给一个居中元素高度一半的负的margin-bottom，然后下面的元素只要跟着摆放就能垂直居中了。水平方向就是利用translate做偏移，这个没什么好说的，你也可以换成其他办法。
这种方法就是各种固定死，首先最外层的父容器需要一个固定高度，以让.placeholder的height:50%有效，然后，margin-bottom也需要固定死，而且得需要知道居中元素高度。单纯就水平方向来说，这个方法比较适合需要兼容低版本IE的固定式布局的项目，因为兼容性好.
6.IFC布局上下文下的水平垂直居中
这里首先是用text-center让inline-block水平居中，然后给一个vertical-align:middle，但是仅仅给vertical-align:middle是不够的，因为此时它还没有vertical-align对齐的参照物，所以就给了一个占位的inline-block，它的高度是100%。
这个方法对于居中元素不需要定宽高，而且元素根据vertical-align值的不同不仅仅可以实现居中，还可以将其放在上面下面等。缺点是父元素需定高.