2016年4月28日
1.最佳法： .absolute-center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }
在线演示
在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。
w3.org:?if ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。
developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space
设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了position: relative; 样式的容器。
developer.mozilla.org:?for absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。
developer.mozilla.org:?the margin of the [absolutely positioned] element is then positioned inside these offsets.
既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。
w3.org:?if none of the three [top, bottom, height] are ‘auto’: if both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?aka: center the block vertically
使用“完全居中”，有意遵照了标准margin: auto; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。
优点：
跨浏览器，兼容性好（无需hack，可兼顾ie8~ie10） 无特殊标记，样式更精简 自适应布局，可以使用百分比和最大最小高宽等样式 居中时不考虑元素的padding值（也不需要使用box-sizing样式） 布局块可以自由调节大小 img的图像也可以使用 同时注意：
必须声明元素高度 推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题 这种方法在windows phone上不起作用
2.负margin法： .negative-margin { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */}
在线演示
3.transform法： .transform { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
在线演示
4.inner-block法： html:

css:
.center-container.is-inline { text-align: center; overflow: auto;} .center-container.is-inline:after,.is-inline .center-block { display: inline-block; vertical-align: middle;} .center-container.is-inline:after { content: ''; height: 100%; margin-left: -0.25em; /* to offset spacing. may vary by font */} .is-inline .center-block { max-width: 99%; /* prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* only for ie9+ */ }
在线演示
5.flexbox法： .center-container.is-flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}
在线演示
优点：
内容可以是任意高宽，溢出也能表现良好 可以用于各种高级布局技巧 同时注意： 不支持ie8-9 同时注意：
需要在body上写样式，或者需要额外容器 需要各种厂商前缀兼容现代浏览器 可能有潜在的性能问题
6.table-cell法： html:

css:
.center-container.is-table { display: table; }.is-table .table-cell { display: table-cell; vertical-align: middle;}.is-table .center-block { width: 50%; margin: 0 auto;}
在线演示
参考出处：
codepen of shshaw 伯乐在线