居中
居中
1.元素水平居中
(1)行内元素水平居中
text-align:center;
(2)块元素水平据居中
margin:0 auto;
2.单行文字垂直居中
height:n px;
line-height:n px;
3.文字相对图片、输入框垂直居中
vertical-align:middle;
4.块元素垂直居中
(1)绝对定位居中（Absolute Centering）
. absolute_container {
position: relative;
}
.absolute_center {
overflow:hidden;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.absolute_center.absolute_fixed {
position: fixed;
z-index: 9999;
}
.absolute_center.absolute_right {
left: auto; right: 20px;
text-align: right;
}
.absolute_center.absolute_left {
right: auto; left: 20px;
text-align: left;
}
.absolute_center.absolute_responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 800px;
}
.absolute_center.absolute_overflow {
overflow:auto;
}
.absolute_center.absolute_image{
width: 100%;
height: auto;
}
原理：
①在普通内容流（normal content
flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
②position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
③top: 0; left: 0; bottom: 0; right:
0;将给浏览器重新分配一个边界框，此时该块将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。
④给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
⑤由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
优点：
①较好的跨浏览器兼容性，兼容IE8-IE10。
②无需其他特殊标记，CSS代码量少。
③支持百分比属性值和min-/max-属性。
④只用这一个类可实现任何内容块居中。
⑤不论是否设置padding都可居中（在不使用box-sizing属性的前提下）。
⑥内容块可以被重绘。
⑦完美支持图片居中。
缺点：
①宽高可变，但必须明确声明容器高度。
②内容可能溢出容器，可设置overflow:auto来防止内容溢出。
③在Windows Phone设备上不起作用。
(2)负边距居中（Negative Margins）
.negative_container {
position: relative;
}
.negative_center {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;/* (width + padding)/2 */
margin-top: -120px;/* (height + padding)/2 */
}
优点：
①跨浏览器兼容性好，兼容IE6-IE7。
②代码量少。
缺点：
①宽高固定，不支持百分比属性值和min-/max-属性设置。
②内容可能溢出容器。
③margin、padding和是否定义box-sizing: border-box有关，计算需要根据不同情况。
(3)变形（Transform）
.transform_center {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
优点：
①宽高可变。
②代码量少。
缺点：
①IE8不兼容。
②属性需要写浏览器前缀。
③可能干扰其他transform效果。
④某些情形下会出现文本或元素边界渲染模糊的现象。
(4)表格单元格（Table Cell）
.table_cell_container {
display:table;
vertical-align:middle;
text-align:center;
}
.table_cell_center {
display:table-cell;
}
优点：
①高度可变。
②容器自适应高度。
③浏览器兼容性好。
缺点：
①额外HTML标签。
(5)行内块元素（Inline Block）
.inline_block_container {
text-align:center;
overflow:hidden;
}
.inline_block_center {
height:80%;
width:80%;
max-width:99%;
max-width: calc(100%-0.25em);/*IE9*/
}
.inline_block_container:after, .inline_block_center{
display: inline-block;
vertical-align: middle;
}
.inline_block_container:after,{
content:””;
height:100%;
margin-left:-0.25em;
}
优点：
①高度可变。
②容器高度自适应
③较好的浏览器兼容性，兼容IE7。
缺点：
①额外HTML标签。
②水平居中依赖于margin-left: -0.25em；该尺寸对于不同的字体/字号需要调整。
③宽度不能超过容器的100% - 0.25em。
(6)Flexbox
优点：
①宽高可变。
②高级布局技术。
缺点：
①IE8-IE9不兼容。
②属性需要写浏览器前缀。
③body需要特定的容器和CSS样式。
学习参考网址http://blog.csdn.net/freshlover/article/details/11579669
