经历过很多次的面试之后，发现很多公司都会问道一个问题，那就是关于如何让一个元素水平居中和垂直居中，在这里就是仁者见仁智者见智，实现的方法有很多种，这里我也就不多说了，下期我会写一篇关于居中的文档，下面就主要介绍一下css中的vertical-align这个属性以及它的属性值。
1. vertical-align是干嘛的?
看名字就知道，
垂直-对齐；简单点就是设置元素的垂直排列方式；
说具体点就是用来定义
行内元素的基线相对于该元素所在行的基线的垂直对齐;默认值是
baseline；不具有继承性；
2. 什么是基线？
3. vertical-align有哪些属性值？
它的属性值很多，如下：
常用的也就
middle/bottom/top；它的默认值是
baseline；其他的属性值还有
sub/super/text-top/text-bottom/inherit等等；
具体含义：
-
baseline：
将支持valign特性的对象的内容与基线对齐
sub：
垂直对齐文本的下标super：
垂直对齐文本的上标
top：
将支持valign特性的对象的内容与对象顶端对齐middle：
将支持valign特性的对象的内容与对象中部对齐bottom：
将支持valign特性的对象的文本与对象底端对齐
text-top：
将支持valign特性的对象的文本与对象顶端对齐text-bottom：
将支持valign特性的对象的文本与对象底端对齐
<percentage>：
用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。<length>：
用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）为负值的话，这会使元素降低而不是升高。
其实我也看得不太明白,看下图吧:
4. 怎么使用该属性？
在css中使用：
方式很多种，就以内联式为例：
<style>
选择器 {
vertical-align: 对应属性值;
}
</style>
在js中使用：
<script>
var obj = document.getElement......;
// 在js中，要将-去掉，紧跟的字母大写；
obj.style.verticalAlign = "相应属性值";
</script>
5. 为什么我们有时候设置的vertical-align属性无效，不起作用？
-
浏览器支持方面：
首先，所有浏览器都支持 vertical-align 属性的；
但是要注意：
任何的版本的Internet Explorer （包括 IE8）都不支持属性值"inherit"； -
该元素生成的框的类型：
每个元素都有对应的display属性，修改display属性值即可；
6. 举个栗子：
6.1 给div设置vertical-align为什么不起作用？
vertical-align 只对行内元素有效，对块级元素无效。
这就是为什么有的时候使用 vertical-align 属性无效的一种情况。
但是我们可以使用 display 属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 900px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
}
img {
width: 300px;
height: 100px;
}
.img1 {
vertical-align: top;
display: table-cell;
height: 300px;
}
.img2 {
vertical-align: middle;
display: table-cell;
height: 300px;
}
.img3 {
vertical-align: bottom;
display: table-cell;
height: 300px;
}
</style>
</head>
<body>
<div id="test">
<div class="wrap">
<div class="img1">
</div>
<div class="img2">
</div>
<div class="img3">
</div>
</div>
</div>
</body>
</html>
效果如下：
6.2 怎么兼容文字多行的span标签，使其文字垂直居中？
对于文字居中，我们可以设置line-height,但是如果是多行的文字，貌似行不通，可以使用类似6.1来解决；
代码如下：
很奇怪，这里我设置了display: tale-cell;之后，我发现设置margin不起作用了
