行高作为百分比不起作用
我有一个行高的问题，我不能把我的脑袋。
下面的代码将把一个图像放在div的中间：
CSS
.bar { height: 800px; width: 100%; line-height:800px; background-color: #000; text-align: center; } .bar img { vertical-align: middle; } HTML
<div class="bar"> <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div>
但是，如果我将行高更改为100％，则行高不起作用（或者至less不会成为div的100％）。
示例jsfiddle
有谁知道我在做什么错？
line-height: 100%表示该元素的字体大小的100％，而不是其高度的100％。 实际上，行高总是相对于字体大小而不是高度，除非其值使用绝对长度单位（ px ， pt等）。
我知道这个问题是旧的，但我发现对我来说是完美的解决方法。
我把这个CSS添加到我要中心的div：
div:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
这个工程每次都很干净。
编辑：只是为了完成，我使用scss，我有一个方便的混合，我包括每个父母谁是直接的孩子，我想垂直居中：
@mixin vertical-align($align: middle) { &:before { content: ""; display: inline-block; height: 100%; vertical-align: $align; // you can add font-size 0 here and restore in the children to prevent // the inline-block white-space to mess the width of your elements font-size: 0; } & > * { vertical-align: $align; // although you need to know the font-size, because "inherit" is 0 font-size: 14px; } }
当使用百分比作为行高时，它不是基于div容器，而是基于font-size。
line-height：100％是一个简单的方法来垂直居中元素，如果它是相对于容器计算的，但这太容易了，因此它不起作用。
所以相反，这只是另一种表示线条高度的方式：1em（right？）
垂直居中元素的另一种方法是：
.container { position:relative; } .center { position:absolute; top:0; left:0; bottom:0; right:0; margin: auto; /* for horiz left-align, try "margin: auto auto auto 0" */ }
可能不是很漂亮，但它的工作，和它的语义;
<div class="bar" style="display: table; text-align: center;"> <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div>
显示：table-cell给元素提供独特的表格能力来alignmentverticaly（至less我认为它是独特的）
这是一个非常晚的答案，但是在现代浏览器中，假设父元素也是屏幕高度的100％，那么可以使用vh视口单元。 小提琴
line-height: 100vh;
浏览器支持
