css-实现元素垂直居中对齐
css-实现元素/元素内容，垂直居中对齐
一、单行内容的垂直居中（line-height：行高方法）
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，就可以了。
缺点：1：这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的了。
2 ：IE中不支持<img>等的居中。
优点：适合在所有浏览器，没有足够空间时，内容不会被切掉，同时支持块级和内联元素
但是这种方法对运用在小元素上是非常有用的，比如说让一个button、或者单行文本字段。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .middle-demo-1{ background-color:#f1f1f1; height: 30px; line-height: 30px; } </style> </head> <body> <div class="middle-demo-1"> css实现元素 </div> </body> </html>
二、多行内容垂直居中，且容器高度可变：（padding:内边距方法）
也很简单，给出一致的 padding-bottom 和 padding-top 就行
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：容器不能固定高度
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .middle-demo-1{ padding-top: 24px; padding-bottom: 24px; } </style> </head> <body> <div class="middle-demo-2"> css实现元素 </div> </body> </html>
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。
这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
缺点：IE低版本不支持这些属性。如果需要兼容ie6,7，需要使用Hack
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .middle-demo-3{ display: table-cell; height: 100px; vertical-align: middle; background-color: #f1f1f1; } </style> </head> <body> <div class="middle-demo-3"> css实现元素 </div> </body> </html>
四、已知宽高块元素的水平垂直居中
绝对定位50%，margin负值
缺点：由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。
注意：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .middle-demo-4{ background-color: red; width: 200px;/*元素的宽度*/ height:200px;/*元素的高度*/ position: absolute; left: 50%;/*配合margin-left的负值实现水平居中*/ margin-left: -100px;/*值的大小等于元素宽度的一半*/ top:50%;/*配合margin-top的负值实现垂直居中*/ margin-top: -100px;/*值的大小等于元素高度的一半*/ } </style> </head> <body> <div class="middle-demo-4">css元素本身水平垂直居中对齐，而不是其元素内容，主意区分</div> </body> </html>
五：全兼容的水平垂直居中实例（原文：http://demo.doyoe.com/css/alignment/），
1:vertical-align 只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框）的。
简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。
2: 换句话说，我们的垂直居中是要在每个line box中进行处理。
而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非 该行文本的line box，所以就算定
vertical-laign为middle也无法让该行文本在demo容器中垂直居中。
我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo一致，文本将会在line box内垂直居中 即同样实现了在demo容器中垂直居中。本例我们使用伪对象::after来创建那个新增元素，可以设置新增元 素为不可见。
3:由于IE8以下浏览器不支持伪对象::after，于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span，其作用等同 inline-block #5 中的::after。本例支持所有主浏览器。
4:由于ie6,7下不支持display:inline-block,
IE6 中 inline 元素只要触发了 hasLayout 其表现就类似于 inline-block，这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout ，
表现出来是一样的。
5:display:inline-block 后的元素会产生水平空隙 font-size:0:解决间隙问题
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #demo{ height:100px; text-align:center; font-size:0;/*去除 inline-block 空隙*/ background-color: red; } #demo:after,#demo span{ display:inline-block; *display:inline;/*inline-block 兼容ie6,7*/ *zoom:1;/*inline-block 兼容ie6,7*/ width:0; height:100%; vertical-align:middle; } #demo:after{ content:''; } #demo p{ display:inline-block; *display:inline;/*inline-block 兼容ie6,7*/ *zoom:1;/*inline-block 兼容ie6,7*/ vertical-align:middle; font-size:16px; } </style> </head> <body> <div id="demo"> <p>这是一个终极实现的水平垂直居中实例</p> <!--[if lt IE 8]><span></span><![endif]--> </div </body> </html>
为了更加理解实现原理，这里贴出参照文和相关知识原理
原文参照：http://demo.doyoe.com/css/alignment/
inline-block的前世今生：http://www.iyunlu.com/view/css-xhtml/64.html
未知高度多行文本垂直居中：http://iyunlu.com/view/css-xhtml/77.html
结语：我觉得以上5种方法在日常的工作中足够用了，而且实现原理简单，易于理解，如果不满足于以上的方法，可以看看以下链接的文章，不保证正确性，因为我觉得有部分小小的问题，大家看的时候好好斟酌啦，欢迎互相交流：
http://www.w3cplus.com/css/vertically-center-content-with-css