baseline：字符x的底部，x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

使用flex布局是目前最好的解决办法，子元素布局还是按照1、2、3、4、5这样的顺序进行布局，浏览器器在渲染时会自动反转过来，并且滚动条也会反转过来，即自动定位到最底部。但是IE10目前为止还不支持~，所以在我做的这个项目中是用不了了

在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。