Question

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

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

我如何实现这一目标？我试图为div.message创建一组通用样式，以便我可以在需要时将其删除，它将显示在标题下方区域的中心。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

JSFiddle

Answer 1

如果我理解你，这就是你要找的东西：

header {

}
.content {
  align-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
}
.message {
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
}
.message .text {
  font-size: 20px;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;  
}

The JSFiddle link

Answer 2

以下是我的建议，并获得良好的响应式布局：

添加包装，@Then（也可以使用container）
将body设为灵活列容器，以便container和header垂直堆叠
在content上设置flex-grow: 1，以便获取其父级的剩余空间
使content成为灵活列容器
在content上设置flex-grow: 1，以便获取其父级的剩余空间
使message成为弹性行容器（默认）
在message上设置justify-content: center; align-items: center;，使其内容集中在

最后，我们需要将message移出流程，否则h2将无法填充其整个父级的高度，如果不是，message将不会垂直居中在message

中

注意，由于section位于绝对位置，h2也可以设置为弹性行容器，但我选择使用“列”使其移动明显与标记结构

Updated fiddle

Stack snippet

content

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属性）

Fiddle demo 2

Stack snippet

message

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的包装，您可以将它们全部放在一起。

Fiddle demo 3

Answer 3

您有两种主要方法可以解决此问题： 1）如果您为标题指定了固定高度，则可以使用calc为该部分提供剩余高度：

.header {
  height: 50px;
}

.content {
  height: calc(100vh - 50px);
}

即使是较小的窗口，您也需要确保它能够正常工作（您可能需要添加一些媒体查询）

2）如果您不想为标题指定固定高度，可以将header和section包装到使用flexbox的公共父级中，并允许section要成长。我在这里写了这个解决方案：https://jsfiddle.net/annc8w4j/1/

使用CSS Flex框设置的元素显示在父元素外部，并且不与父元素垂直对齐

3 个答案: