沿父级拉伸显示 flex 或 table 内部 div，文本居中

Question

我想创建一个具有固定 html 结构的响应式页面，这样我就可以调整 css。我想创建具有垂直和水平居中文本的行。 div 应该完全跨越父 div。

我的HTML...

<body>
  <div class="parent">
    <div class="d1">
      one
    </div>
    <div class="d2">
      two
    </div>
    <div class="d3">
      three
    </div>
  </div>
</body>

我的CSS...

body {
  background-color: lightyellow;
  height: 100%;
  width: 100%;
  margin: 0px;
}
.parent {
  background-color: lightblue;
  height: 100%;
}
.d1, .d2, .d3 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100px;
}
.d2 {
  background-color: lightgreen;
}

但是我在这里将 d1、d2 和 d3 设置为 100px 的高度，而不是父级的 100% div。此处示例：https://jsfiddle.net/bLf2sxq0/

我的第二个想法是对父级使用 display: table ，这会导致子级的 table-rows 但是我最终遇到了同样的拉伸问题而且文本不是垂直的居中。这里的 css 会是这样的...

body {
  background-color: lightyellow;
  height: 100%;
  width: 100%;
  margin: 0px;
}
.parent {
  width: 100%;
  height: 100%;
  display: table;
  background-color: lightblue;
}
.d1, .d2, .d3 {
  text-align: center;
  height: 100px;
}
.d2 {
  background-color: lightgreen;
}

此处示例：https://jsfiddle.net/qmbzkwr2/

有没有办法沿父级垂直拉伸 div 并使文本在 div 中垂直和水平居中？所以我不会有宽度 100px 但像 calc(100%/3) 或任何其他解决方案来做到这一点？或者也许通过使用 flex grow 选项？最简单的方法就是:)

感谢您的帮助！

Answer 1

你走在正确的轨道上。使用 flexbox 垂直均匀地拉伸和填充项目。请记住将父容器（例如 body，html）设置为 height: 100%。

从这里开始，如果您想控制某些项目，请对任何单个项目使用 flex，例如 class.d2 上的 flex: 1 1 300px。

Codepen

body, html {
  height: 100%;
}

.parent {
   background-color: lightblue;
   height: 100%;
   
   display: flex;
   flex-direction: column;
 }

 .d1, .d2, .d3 {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
 }

 .d2 {
   background-color: lightgreen;
 }

  <div class="parent">
    
    <div class="d1">
      <div class="d11">
        one
      </div>
    </div>
    
    <div class="d2">
      two
    </div>
    
    <div class="d3">
      three
    </div>
    
  </div>

沿父级拉伸显示 flex 或 table 内部 div，文本居中

Stretch display flex or table inner divs along parent with centered texts

html

css

alignment

vertical-alignment

flexbox