三. absolute布局上下文下的水平垂直居中
50% + -50%
原理很简单，就是利用left：50%将盒子的左边先置于父容器的中点，然后再将盒子往左偏移盒子自身宽度的50%，这里有三种具体实现：
水平垂直居中水平垂直 居中水平垂直居中水平 垂直居中水平垂直居 中水平垂直居中水平垂直居中水平垂直 居中水平垂直居中水平 垂直居中水平垂直居 中水平垂直居中水平垂直居中水平垂直 居中水平垂直居中水平 垂直居中水平垂直居 中水平垂直居中
.wrap{ position: relative; width: 100%; height: 200px; border:1px solid; background-color: #ccc; .ele{ position: absolute; left: 50%; top: 50%; background-color: #333; &.margin{ width: 160px; height: 100px; margin-left: -80px; margin-top: -50px; } &.translate{ -webkit-transform:translate3d(-50%, -50%, 0); transform:translate3d(-50%, -50%, 0); } .ele-inner{ position: relative; left: -50%; top: -50%; width: 100%; height: 100%; background-color: #333; } &.relative{ width: 150px; height: 100px; background-color: transparent; } } } 上面三个方法中，margin方法和relative方法都需要知道元素的宽高才行(relative方法只知道高也行)，适用于固定式布局，而transform方法则可以不知道元素宽高
text-align:center + absolute
text-aign:center本来是不能直接作用于absolute元素的，但是没有给其left等值的行级absolute元素是会受文本的影响的。
代码：
.wrap{ text-align: center; width: 100%; height: 400px; background-color: #ccc; font-size: 0; } .ele{ position: absolute; margin-left: -(100px / 2); margin-top: (400px - 100px) / 2; width: 100px; height: 100px; display: inline-block; background-color: #333; } 简单解释下，首先，text-align:center作用的是文本而不是absolute的元素，但是，当absolute元素为inline-block的时候，它会受到文本的影响，然后你可能会问这里没文本啊，我只能告诉你说这下面是有的，是个匿名的文本节点。具体的这里不展开，可以参考，然后理解这句话:
If the inline box contains no glyphs at all, it is considered to contain a strut (an invisible glyph of zero width) with the A and D of the element's first available font
然后这个匿名文本由于受到text-align:center影响居中了，这个时候absolute盒子的左边跟父容器的中点对齐了，所以就还需要往回拉50%，这里用的是margin-left，你也可以用其它方式拉。然后就是垂直方向的对齐，垂直方向是不能被操作文本的属性影响的，所以我这里用的是margin-top来让它偏移下去。
absolute + margin : auto
代码：
html,body{ width: 100%; height: 100%; margin: 0; } .wrap{ position: relative; width: 100%; height: 100%; background-color: #ccc; .ele{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background-color: #333; } } 这种方法能简单的做到居中，但是必须有width和height值。 适用于图片居中的网易nec的一个方法
代码：
html,body{ width: 100%; height: 100%; margin: 0; } .wrap{ position:relative; width: 100%; height: 100%; p{ position:absolute; left:50%; top:50%; } img{ &:nth-child(1){ position:static; visibility:hidden; } &:nth-child(2){ position:absolute; right:50%; bottom:50%; } } } 这种方法主要是利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，如果是不使用nth-child选择器的花，IE6都是能顺利兼容的