我遇到了线高问题，我无法完全理解。
以下代码将在 div 中居中显示图像：
.bar {
height: 800px;
width: 100%;
line-height:800px;
background-color: #000;
text-align: center;
}
.bar img {
vertical-align: middle;
}
<div class="bar">
<img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
但是，如果我将行高改为100%，那么行高就不会生效（或者至少不会变成div的100%）。
有谁知道我做错了什么？
【问题讨论】：
标签： css
line-height: 100% 表示该元素的字体大小的 100%，而不是其高度的 100%。事实上，行高总是相对于字体大小，而不是高度，除非它的值使用绝对长度单位（px、pt 等）。
【讨论】：
我知道这个问题很老，但我发现什么对我来说是完美的解决方法。
我将此 css 添加到我想要居中的 div 中：
div:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
这每次都有效，而且很干净。
编辑： 只是为了完成，我使用 scss 并且我有一个方便的 mixin，我包含在每个 parent 谁是我想要垂直居中的直接孩子：
@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 定义了 self 与 parent 相关的垂直位置，而 text-align 的工作方式不同。
@mixin 声明适用于 sass 用户，它的使用方式如下：
div {
@include vertical-align(middle)
}
【讨论】：
当您使用百分比作为行高时，它不是基于 div 容器，而是基于字体大小。
【讨论】：
line-height: 100% 将是垂直居中元素的一种简单方法，如果它是相对于容器计算的，但这太容易了，因此它不起作用。
因此，它只是另一种说法 line-height: 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>
display: table-cell 为元素提供了独特的垂直对齐表格能力（至少我认为它是独一无二的）
【讨论】：
【讨论】：
此解决方案适用于 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>【讨论】：
这是现代解决方案，您需要在容器 div 或外部 div 中设置以下 CSS。
.outer-div {
display: flex;
justify-content: center;
align-items: center;
}
以下解决方案可能适用于您要垂直居中的元素。请注意，外部或容器 div 应该是
.inner-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
请注意，外部或容器 div 的位置应该是相对的。
【讨论】：