请读到最后，flex厉害！ヾ(o???)?入门，先考虑这样一个问题：How在固定高度的父div中垂直居中一行文本？我们都知道设置父div的line-height等于它的高度就可以了，像这样：//html
我要垂直居中
//cssdiv{内边距：10px;高度：120px；行高：120px；字体大小：16px；background:pink;}效果如下图：原理也很简单，设置line-height后，文字的行高会随之变化。下面看一下设置line-height后的具体变化方法：ling-height的值减去textfont-size的值，即(120-16)=104px，加上他们的差`104/2=52px`分别位于文本上方和下方。所以文本最终可以在整个div中垂直居中。补充一点line-heihgt的值设置为百分比和设置为数字的区别：如果当前元素font-size:30px;我们希望行高是字体大小的3倍，我们将设置line-height:300%;或者line-height:3;，如果这个元素有子元素，字体设置为font-size:16px;。那么设置为300%时，子元素的行高为90px，即先计算后继承；当设置为3时，子元素的行高为48px，即先继承后计算。当jsfillder中的例子只有文字的时候，我们可以使用上面的方法实现垂直居中，那么如果div中包含图片和文字呢？下一层是写这篇文章的问题的实际来源：一个div包含两个子元素：左边的图片和右边的文字。已知图片的高度比文字高很多，如何让图片和文字垂直居中？如果还是用上面设置line-height的方法：//html
//cssdiv{padding:10px;高度：160px；行高：160px；字体大小：16px；背景：粉色；}img{宽度：70px；高度：70px；}效果是这样的：可以看到，但是文字居中，图片的位置不是我们想要的。原因是：图片img有一个vertical-align属性，它定义了内联元素的基线和元素所在行的基线之间的垂直位置关系。默认值为基线，它将元素放置在父元素的基线上。【注：该元素始终指的是元素的行高！所以如果你想在一个高度为50px的div中让一个行高为14px的内联元素垂直居中，首先需要将内联元素的line-height改为50px。ω●】vertical-align除了默认值外，还有以下我们依次试试：（其中，如果设置百分比，参考对象就是line-height的值。）img{vertical-align:顶部;}//将元素的顶部与行中最高元素的顶部对齐Alignimg{vertical-align:bottom;}//将元素的顶部与行中最低元素的顶部对齐img{vertical-align:text-top;}//元素的顶部与父元素字体的顶部对齐img{vertical-align:text-bottom;}//元素底部与父元素字体底部对齐img{vertical-align:middle;}//把这个元素放在要查找的父元素中间，设置值middle就是我们想要的结果。另外vertical-align还可以设置百分比和数值。当设置为负值时，图片会向下移动。没想到用两行flex代码就可以实现●0●只需在容器中添加如下两个样式，就可以成功垂直居中，line-height是多余的。display:flex;align-items:center;完整的代码是这样的：//html
//cssdiv{display:flex;对齐项目：居中；填充：10px；高度：160px；字体大小：16px；背景：粉色；}img{宽度：70px；高度：70px;}很简单！附上阮老师写的flex教程：Flex布局教程：语法Flex布局教程：实例参考：http://www.w3school.com.cn/cs...https://developer.mozilla.org...http://stackoverflow.com/ques...https://developer.mozilla.org...
