html - 使用 CSS Flex 框设置样式的元素出现在父元素之外，并且不与父元素垂直对齐

Question

我有一个 <section>带有标题的元素，包含 <div>其中包含一些文本。我需要 <div>出现在 <section> 的中间标记，以及 <section>应该占据标题下的剩余空间。对于用户，<div>应出现在标题下方空间的中心。

我的以下代码在某种程度上做到了这一点，但它看起来偏离了中心。我想那是因为我申请了 height: 100vh到 <section> ，这使得该元素比页面的其余部分长。

我如何实现这一点？我正在尝试为 div.message 创建一组通用样式以便我可以在需要时将其放入，它会出现在标题下方区域的中心。

header {}

.content {
  height: 100vh;
}

.message {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}

.message .text {
  font-size: 20px;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

<header>
  <h1>Header area</h1>
</header>
<section class="content">
  <h2>This is a section</h2>
  <div class="message">
    <p class="text">This section is empty</p>
  </div>
</section>

JSFiddle

Answer 1

以下是我建议您使用的方法，并获得良好的响应式布局:

• 添加一个包装器，容器(也可以使用body)
• 将 container 设为 flex 列容器，这样 header 和 content 将垂直堆叠
• 在 content 上设置 flex-grow: 1 以便占用其父级的剩余空间
• 使内容成为 flex 列容器
• 在 message 上设置 flex-grow: 1 以便占用其父级的剩余空间
• 使消息成为 flex 行容器(默认)
• 设置 justify-content: center; align-items: center; 在 message 上，所以它的内容居中

最后，我们需要让 h2 脱离流，否则 message 不会填满它的整个父级的高度，如果没有，message 不会在 部分

中垂直居中

请注意，由于 h2 是绝对定位的，因此 content 也可以设置为 flex 行容器，尽管我选择使用“列”来制作与标记结构相比移动明显

Updated fiddle

堆栈片段

html, body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {}
.content {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.content h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.message {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message .text {
  font-size: 20px;
}


/* styles for this demo */
html, body {
  margin: 0;
}
.container {
}
header {
  border: 1px dotted red;  
}
.content {
  border: 1px dotted red;
}
.message,
.message .text {
  border: 1px dotted red;
}

<div class="container">

  <header>
    <h1>Header area</h1>
  </header>

  <section class="content">
    <h2>This is a section</h2>
    <div class="message">
      <p class="text">This section is empty</p>
    </div>
  </section>

</div>

---

根据您打算如何使用message，您还可以设置justify-content: center; align-items: center; 到 content(并将 flex 属性放在 message 上)

Fiddle demo 2

堆栈片段

html, body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {}
.content {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.message {
}

.message .text {
  font-size: 20px;
}


/* styles for this demo */
html, body {
  margin: 0;
}
.container {
}
header {
  border: 1px dotted red;  
}
.content {
  border: 1px dotted red;
}
.message,
.text {
  border: 1px dotted red;
}

<div class="container">

  <header>
    <h1>Header area</h1>
  </header>

  <section class="content">
    <h2>This is a section</h2>
    <div class="message">
      <p class="text">This section is empty</p>
    </div>
  </section>

</div>

---

如果 message 只是 p 的包装器，您可以将它们放在一起。

Fiddle demo 3