場景：父元素 高度固定，如何使其中的文字垂直居中？
1、table布局：
利用display:table+display:table-cell的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style> .middle-box{ display: table; /*重點*/ height: 300px;border: 1px solid #000; } /*重點：table-cell布局*/ .middle-inner{ display: table-cell; vertical-align:middle; text-align:center; } </style>
<body>
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端開發博客，專注前端開發和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客，一直致力於WEB開發</span></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style> .middle-box{ display: table; /*重點*/ height: 300px;border: 1px solid #000; } /*重點：table-cell布局*/ .middle-inner{ display: table-cell; vertical-align:middle; text-align:center; height: 200px; border:1px solid #000; } </style>
<body>
<div class="">
<div class="middle-inner">
<p><span class="suc-tip">前端開發博客，專注前端開發和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客，一直致力於WEB開發</span></p>
</div>
</div>
</body>
</html>
效果：
利用display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css居中對齊</title>
<style>
*{padding: 0;margin:0;font-size: 12px;} div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;} </style>
<div>
<span>測試文字測試文字</span>
</div>
<div> 測試文字測試文字 </div>
<div>
<p>測試文字測試文字</p>
<p>測試文字測試文字</p>
</div>
</body>
</html>
效果：
優點：等高布局，無需設置高度，文字輕松實現垂直居中
缺點：ie7以下不兼容！
2、利用line-height和vertical-align：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css居中對齊</title>
<style>
*{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #000; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </style>
<div>
<span>測試文字測試文字</span>
</div>
<div>
<span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span>
</div>
</body>
</html>
效果：
關鍵樣式：
① 父元素（這里是div）設置和高度一致的 line-height （這里是200px）--- 由后面的vertical-align定義看，這是為了設置div的基線
② 子元素 (這里是span) 設置合適的line-height，並設置display:inline-block、vertical-align: middle; --- inline水平的元素無法設置line-height，所以這里要設置inline-block。
重新審視一下 CSS vertical-align 屬性 的定義：
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊，允許指定負長度值和百分比值，這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
有以下幾點需要注意：
① vertical-align屬性應該設置到 行內元素上（行內塊元素也可）
② 如果文字的總高度超出了 容器（這里是div）的高度，那么垂直居中會失效。
③ ie7以下 span結束標簽和內部內容不能有間隔空白，也就是說span的結束標簽和內部內容要連在一起。