行高百分比不起作用

我的行高存在问题，我无法完全解决。

以下代码将图像在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％，则线高不会生效（或至少不会变为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，我将其包含在我希望垂直居中的直接孩子的每个父母中：

@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:before将在div内但在其任何子级之前添加一个元素。当使用:before或:after必须使用content:声明时，否则什么也不会发生，但是出于我们的目的，内容可以为空。然后，我们告诉该元素与父元素一样高，只要定义了其父元素的高度并且该元素至少是inline-block。vertical-align定义与父母相关的自我的垂直位置，与之相反text-align。

该@mixin声明适用于sass用户，它的用法如下：

div {
    @include vertical-align(middle)
}

当您将百分比用作行高时，它不是基于div容器，而是基于字体大小。

line-height：如果相对于容器进行计算，则100％垂直对齐元素是一种简单的方法，但这太简单了，因此不起作用。

因此，它只是说行高的另一种方式：1em（对吗？）

将元素垂直居中的另一种方法是：

.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为元素提供了唯一的表格清晰度，以垂直对齐（至少我认为它是唯一的）

这是一个很晚的答案，但是在现代浏览器中，假设父元素也是屏幕高度的100％，则可以使用vh视口单元。 小提琴

line-height: 100vh;

浏览器支持

此解决方案在IE9及更高版本中有效。首先，我们将孩子的最高位置设置为50％（在父母中间）。然后使用translate规则，将孩子向上移动其实际高度的一半。主要好处是我们不需要定义孩子的身高，它是由浏览器动态计算的。JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

一种更现代的方法是为此使用flexbox，它更简单，更干净。然而，Flexbox的是什么完全不同的模式inline-block，float或position曾经是。

要对齐内部物品，.parent请执行以下操作：

.parent {
  display: flex;
  align-items: center;
}

就是这样。儿童flex的父母将自动转换为柔性子项。

您应该阅读有关flexbox的更多信息，这个备忘单是一个很好的起点：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可以基于该元素的高度设置line- height。如果元素高度为200px，则需要将线高设置为200px，以使文本居中。

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>