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。伪对象应为main高度的100％，因为它是通过coordonates大小确定的绝对元素，因此伪对象应采用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

在这种情况下，您可以依靠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 3

在仍然使用行高来使文本居中的同时，最简单的方法可能是使用视口单位而不是％。只需将您的主要部分设置为80vh（或您希望的高度）即可。

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

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

Answer 4

您确定要以Line Height做吗？它可能会产生某些后果。看到这支笔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

如何根据容器的高度百分比确定行高？

5 个答案: