.md-warp {
width: 400px;
height: 300px;
max-width: 100%;
border: 1px solid #000;
}
.md-main {
display: block;
width: 100px; // 可无
height: 100px;// 可无
background: #f00;
}
.md-warp{
font-size: 0;
}
.md-warp:before{
content:'';
display:inline-block;
width: 0;
height:100%;
vertical-align:middle;
}
.md-main{
display:inline-block;
vertical-align:middle;
font-size: 14px;
}
首先要了解垂直方向的对齐排版需使用 vertical-align ，并且只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框） 的，简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。换句话说，我们的垂直居中是要在每个line box中进行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非该行文本的line box，所以就算定义vertical-laign为middle也无法让该行文本在demo容器中垂直居中。我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo一致，文本将会在line box内垂直居中，即同样实现了在demo容器中垂直居中。
md-warp:before 和md-main 在同一行(inline-block), 形成一个高度为容器高度的 line-box. md-main的vertical 基于这个高度计算
inline: 内联元素, 宽高无法设置由内容决定, 并排不分行,直到塞满 block: 独占width 即使设置了width 也无效, 设置width 后对象依旧占满一行,但内容的宽度变了
