一、文字垂直居中
习惯性的我们想对文字进行垂直居中，首先想到的是设置line-height与height相等
我是垂直居中位置，我就这么帅！
效果如图：
但是如果出现多行文字效果就...
我是垂直居中多行文字，我就这么帅！ 我是垂直居中多行文字，我就这么帅！
立刻就不帅了！！
然后就想到了控制垂直的属性vertical-align:middle;
但是加上去之后好像一点效果也没有
vertical-align:middle直接用是无效的，当它放在table里面的tr效果就实现了
基于这个原理，只要把div的display属性改成table-cell就可以了
我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字
效果如下图
这里要说一下的是字体大小用了em，out_box设置了font-size:10em; height的高度就字体大小的1.14倍
2016.1.12
问题：当使用float后垂直居中效果失效，即vertical-align:middle失效，正研究解决方法。
二、图片垂直居中
来先看看效果
效果还是挺满意的（效果为火狐与ie10）
上面的效果，其实也没有什么好说的，水平居中用了margin：0 auto;稍微要注意一下的是img默认的display为inline-block;所以这里要设置一下display：block;
今天刚好看到另外一种很实用的居中方法：
① 透明gif图片+背景定位
效果：
② display:table-cell和文字大小控制居中
作者原版的代码
效果如图：
不知道为什么没有居中，测试了几乎所有浏览器，效果都一样，然后决定还是换回上面用的margin：0 auto 来控制
.zxx_align_box_4 li{ float:left; margin-right:13px; list-style:none; border:1px solid red; padding:5px; } .zxx_align_box_4 li div{ display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; vertical-align:middle; } .zxx_align_box_4 li div img{ display:block; margin:0 auto; } 效果出来了
③ display:inline-block和文字大小控制居中
原作者的这种方法，利用vertical-align:middle，垂直居中，我就是实现不了（我做出来的效果都是如上）
④ 使用空白图片实现垂直对齐
.zxx_align_box_6 li{ height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0; } .zxx_align_box_6 li .alpha_img{ height:100%; width:1px; vertical-align:middle; } .zxx_align_box_6 li .show_img{ vertical-align:middle; } 
效果
一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。
其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。而且代码很简单，很易懂，想出错都难！
原作者链接：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html