标签：
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 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-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>
缺点：由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在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>
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
标签：
原文地址：http://www.cnblogs.com/kaililikai/p/5789660.html
