如何从容器的 % 高度确定行高？

Question

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

如何让 line-height 等于容器高度？

*    { 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。伪是主高度的 100%，因为它是一个通过坐标调整大小的绝对元素，伪应该采用 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 这种视觉效果，这不是行高的工作，也不是使用它的方式。行高：80%；表示 1em 的 80%（字体大小设置）。

Answer 2

在仍然使用行高使文本居中的同时执行此操作的最简单方法可能是使用视口单位而不是 %。只需将您的主要部分及其行高设置为 80vh（或者您希望它有多高）。

main {
  height: 80vh;
  line-height: 80vh;
}

如果您不熟悉视口单位及其工作原理，请联系here is a quick explanation with some examples。祝你好运！

Answer 3

在这种特殊情况下，您可以依赖 vh 单位

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

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

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

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

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

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

Answer 4

您确定要使用行高吗？它可能会产生某些后果。看到这支笔https://codepen.io/iamrgaurav/pen/xJMpWO 但正如斯蒂芬所说，这是您想要实现的方式

.footer{
  position:fixed;
  bottom:0;
}
.header{
  position:fixed;
  top:0;
}
.main{
  position:relative;
  top:10px;
  height:100%;
  line-height:90vh;
  background-color:#ddd;
}

<header class = "header">header</header>
<main class = "main">
  <div>Main</div>
</main>
<div class = "footer">footer</div>

Answer 5

设置line-height 不会使文本垂直对齐。对于水平对齐，在容器中使用text-align: center;。

对于垂直对齐，您可以使用以下 CSS，因为它是绝对定位的。

main div {
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%, -50%);
}

Fiddle