html - 如何从容器的高度百分比确定行高？

Question

在经典布局中(页眉固定，主体和页脚固定)，我想将主要元素的文本居中。出于本练习的目的，我想设置 line-height 使其等于主要元素的高度，然后文本将垂直居中。绝对定位的主要元素的顶部和底部填充为 10%，因此它的高度为 80%。

如何让行高等于容器高度？

*    { box-sizing: border-box; }
html {     height:       100%; }
body {     margin:          0; 
        font-size:       10px; }

header { border: 1px solid black;
    position: fixed;
    top: 0;
    height: 10%;
    left: 0;
    right: 0;
}

main { border: 1px solid black; left: 0; right: 0;
    position: absolute;
    top: 10%;
    /* height: 80%; */
    bottom: 10%;
    line-height: 80%;
}

footer { border: 1px solid black;
    position: fixed;
    height: 10%;
    left: 0;
    right: 0;
    bottom: 0;
}

        <header>Header</header>
        <main><div>Main Div</div></main>
        <footer>Footer</footer>

Answer 1

您可以使用伪装的老技巧，将 div 设置为 inline-block 元素和 vertical-align。 pseudo 是 main 高度的 100%，因为它是一个通过坐标确定大小的绝对元素，pseudo 应该采用 height:100%;

下面的演示

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-size: 10px;
}

header {
  border: 1px solid black;
  position: fixed;
  top: 0;
  height: 10%;
  left: 0;
  right: 0;
}

main {
  border: 1px solid black;
  left: 0;
  right: 0;
  position: absolute;
  top: 10%;
  /* height: 80%; */
  bottom: 10%;
}


/* centering trick */

main::before {
  content: '';
  height: 100%;
}

main:before,
main>div {
  vertical-align: middle;
  display: inline-block;
}


/* end centering trick */

footer {
  border: 1px solid black;
  position: fixed;
  height: 10%;
  left: 0;
  right: 0;
  bottom: 0;
}

<header>Header</header>
<main>
  <div>Main Div</div>
</main>
<footer>Footer</footer>

但这确实不是正确的做法，而且这个例子也不会教给你任何有用的东西，今天你可以轻松地使用 flex 或 grid 模型来避免棘手的方法......

忘记 line-height 这种视觉效果，这不是 line-height 的工作，也不是使用它的方式。行高:80%；表示 1em 的 80%(字体大小设置)。