查看效果，竟然没有变化，依然没有垂直居中。这是为什么呢？
莫非是浏览器自身默认的属性优先级高过了当前的属性优先级。
更改一下优先级：
复制代码
<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{line-height:inherit!important;border:1px solid red;}
</style>
再看，果然可以了。垂直居中了。
由此我们页可以印证另一种说法：对于一个空容器，写入内容容器被撑开有了高度宽度，但实际上根本不是文字撑开了div的高度，而是line-height属性。
CSS中起高度作用的主要是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，即使是IE6下11像素左右默认高度bug也是如此。
至于内部的机理，看这里很形象的表述：
到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字，如果它们在一行显示，你艾佛森再牛逼，对不起，只有一个line boxes罩着你；但“春哥纯爷们”这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计五个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。
其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的，这些手下就是文字啦，图片啊，span之类的inline属性的标签啦。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。
例如：
复制代码
<span style=”line-height:20px;”>取手下line-height<span style=”line-height:40px;”>最高</span>的值</span>。
则line boxes的高度就是40像素了。
虽然所有浏览器都支持 line-height 属性。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。因此在实际中，我们最好还是用数值定义line-height。
在本例中即为
复制代码
<style>
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}
.test h2{line-height:40px!important;border:1px solid red;}
</style>
当然，还有一种折中的办法，可以将内容高度设为浏览器默认行高差不多的数值，其余不足的用padding补齐，这样在Opera mobile下，继承浏览器的21px默认行高，就不需要通过加important标记覆盖浏览器默认值了。同时，在其他标准浏览器我们为其子元素指定一个同样的行高，这样就能做到暂时兼容opera mobile 和其他所有标准的浏览器
