Question

我正在创建一个自适应网站，我有一个内容会发生变化的部分（长度为1-150个字符）。我想给它的父母（.lie）一个固定的高度＆amp;宽度，以便我可以将p置于其中。

我知道百分比高度依赖于父母的固定高度，但我div的所有父母都有固定的高度。在Google的开发工具中，394px效果很好，但将其切换为85.097192224622%（394px / 463px * 100%）并不是。

HTML：

<body>
  <main>
    <div class="pg-lie">
      <div class="lie">
        <p>content</p>
      </div>
    </div>
  </main>
</body>

CSS：

body {
  height: 710px / 763px * 100%;

  main {
    height: 463px / 710px * 100%;

    .pg-lie {
      height: 394px / 463px * 100%;

      .lie {
        height: 100%;

        p {
          height: 100%;
        }
      }
    }
  }
}

Answer 1

如果我理解正确，您希望将p垂直居中于.pg-lie。 Given your current code，一个问题是div.lie内的.pg-lie没有CSS规则，因此它的高度默认为auto，这就是p内容的高度。 {1}}是。

如今，即使不知道容器的高度，您也可以使用少数技术之一可靠地垂直居中内容。看看这些文章：

CSS - 高度百分比不起作用

1 个答案: