题外话：前两天和专业老师探讨最近的一个项目，涉及到对一个浮动的盒子局中的问题，老师的解决方法打开了我的新思路。让我有了总结一下平时的居中问题的想法。不然可能忘掉了以后又要到处寻找解决办法了。另外也给我一个启示：启示解决方法有很多，就看你能不能对知识灵活运用。也是通过这件事我体会到了“灵活运用”的真正含义。做事情是这样，做技术尤其要这样。

　　这个总结要一直在整理完善中，以后有了什么新的想法、新的解决办法都要再修改。可惜不在github中，不然可以集思广益了。

　　———————————————--------------—开始-分割线—-----------------———————————————

一、垂直居中

　　（系统笔记之） 父元素高度确定的【单行】文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的；

line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

最后效果见下边的第一条　1.行高+高度：line-height：Npx（N = 与元素高度相同的值）；

　　（系统笔记之） 父元素高度确定的【多行】文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

方法一：使用插入 table （包括tbody、tr、td）标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

1 
2 <td class="wrap">
3 
4     
看我是否可以居中。p>
5 div>
6 </td>tr></tbody>table>
7 body>
css代码：
1 table td{height:500px;background:#ccc} 
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
方法二：设置块级元素的 display 为 table-cell（设置为表格单元显示）
但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，
但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html
1 <div class="container">
2     
3         
看我是否可以居中。p>
4         
看我是否可以居中。p>
5         
看我是否可以居中。p>
6     div>
7 div>
css
1