inline-block 实现元素垂直居中
1.元素的显示方式：
1 display:inline; 3 display:linline-block; 5 display:block
display:inline 表示，元素做为内联元素显示，两个或者多个内联元素可以并列成一行显示；常见的内联元素如：span strong 标签；内联元素的特点是：(1)不能给内联元素设置宽和高；(2)元素和其他元素共占一行;
display:block 表示，元素作为块级元素显示，两个或者多个块级元素分成多行显示；常见的块级元素如：div, h1~h5 标签；块级元素的特点是：可以给元素设置宽高，元素独占一行；
display:inline-block,元素作为内联元素显示，在父级元素宽度足够的情况下，两个或者多个inline-block 元素并列成一行显示；inline-block 的元素可以设置宽高；
2. 对于vertical-align：
支持程度：所有浏览器都支持 vertical-align 属性（包括 IE8）
作用：该属性定义行内元素的基线相对于该元素所在行（父级元素）的基线的垂直对齐方式。
可能的取值方式:
baseline： 元素的基线放置在父级元素的基线上；（vertical-align 属性的默认值是 baseline）；
text-top/text-bottom：把元素的底端垂直与父元素的文本的顶端/底端对齐；
top：把元素的顶端与行中最低的元素的顶端对齐。
bottom：把元素的顶端与行中最低的元素的顶端对齐。【注意，top/bottom 对应的边界是 父级元素的border 的内边界】
middle：把元素相对于父级元素垂直居中；
所以为了使得元素相对于父级元素垂直居中，我们可以把元素的 display 属性设定为 inline-block;同时把元素的 vertical-align 属性值设定为 middle;
3. 如何元素相对于父级元素居中:
<div class="father"> <div class="son son1"></div>
<div class="son son2"></div> </div>
可以采取样式：
.father {
height: 100px;
width: auto;
}
/*
将 after 伪元素添加到father内容元素后面，然后用 after 伪元素把 内容撑开到和父级元素同高；
*/
.father:after {
font-size: 0;
/*内容为空*/
content: "";
/*高度为父级元素的100%*/
height: 100%;
}
.son {
/*显示为内联元素*/
display: inline-block;
/*对齐方式为居中*/
vertical-align: middle;
}
原理是什么呢？我们可以通过下面的一个 demo 来的得到。
<html> <head> <style> div { position: relative; font-size: 0; } .outer { height: 100px; width: 200px; background: #FF0; } .inner { width: 25%; display: inline-block; vertical-align: middle; } .inner1 { height: 20px; background: #010; } .inner2 { background: #202; height: 40px; } .inner3 { background: #103; height: 60px; } .inner4 { background: #401; height: 80px; } .father { height: 100px; width: 100px; background: red; } .son { height: 50px; } /*.outer:after { font-size: 0; display: inline-block; content: ""; position: relative; }*/ </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner inner4">4</div> </div> </body> </html>
代码运行后的排版：
display:inline-block；vertical-align：middle 的元素，元素是相对于同级最高的元素（撑开的区域居中的）；所以当我们把 after 伪元素设置高度：height：100% 的时候，其他同级元素就相对于父级元素居中了.
