CSS

Question

我正在制作一个响应式网站，并且我有一个部分的内容会发生变化（长度范围为 1-150 个字符）。我想给它的 parent (.lie) 一个固定的高度和宽度，这样我就可以在它里面居中 p。

我知道百分比高度取决于他们 parent 的固定高度，但我所有 div 的 parent 都有固定高度。在 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, 一个问题是 .pg-lie 里面的 div.lie 没有 CSS 规则，所以它的高度默认为 auto，这是任何高度p 的内容是。

现在，即使不知道容器的高度，您也可以使用其中一种技术非常可靠地使内容垂直居中。查看这些文章：

CSS – 身高百分比不起作用

CSS – Height Percentage Not Working

html

responsive-design