场景一：父元素 高度固定，如何让其中的文字垂直居中？
1.table布局
1）使用 父元素 display:table + 子 display:table-cell
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
.middle-box{
display: table; /*重点*/
height: 300px;
border: 1px solid #000;
margin:0 auto;
}
.middle-inner{
display: table-cell;
/*重点：table-cell布局*/
vertical-align:middle;
text-align:center;
}
style>
<body>
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客span>p>
<p style=""><span class="suc-tip">我喜欢前端开发span>p>
div>
div>
body>
html>
效果：
2）display:table-cell
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div{
display:table-cell;
width:200px;
height:100px;
border:1px solid pink;
text-align:center;
}
style>
head>
<body>
<div id="">
<p>测试文字p>
div>
<div id="">
<p>测试文字p>
div>
<div id="">
<p>测试文字p>
<p>测试文字p>
div>
body>
html>
效果：
优点：等高布局，无需设置高度，文字轻松实现垂直居中
缺点：ie7以下不兼容！
2.line-height 和vertical-align
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div{
width:150px;
height:150px;
border:1px solid pink;
line-height:150px;
}
span{
display:inline-block;
vertical-align: middle;
line-height:30px;
}
style>
head>
<body>
<div id="">
<span>测试文字测试文字span>
div>
<div>
<span>测试文字<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的结束标签和内部内容要连在一起。