Flexbox - 对齐：居中/对齐：居中，高度未知答案

【问题标题】：Flexbox - align : center / justify : center with unknown heightFlexbox - 对齐：居中/对齐：居中，高度未知
【发布时间】：2015-07-25 10:16:04
【问题描述】：

我正在尝试将页面分成 4 个相等的正方形，内容为居中。我遇到的问题是由于 .flex-item div 具有视口高度而使内容居中，我正在寻找一个完整的 flexbox 解决方案，谢谢。

我从资源中尝试了以下方法：

调整内容中心

对齐项目中心

.flex-container {
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.color_1 {
  background: tomato;
}

.color_2 {
  background: LightGreen;
}

.color_3 {
  background: PowderBlue;
}

.color_4 {
  background: SteelBlue;
}

.flex-item {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  width: 50%;
  height: 50vh;
}

   
<div class="flex-container">
  <div class="flex-item color_1"><div class="inner"><p>inner</p></div></div>
  <div class="flex-item color_2"><div class="inner"><p>inner</p></div></div>
  <div class="flex-item color_3"><div class="inner"><p>inner</p></div></div>
  <div class="flex-item color_4"><div class="inner"><p>inner</p></div></div>
</div>

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

将.flex-item 设为弹性容器，并使用justify-content 和align-items 使其内容居中：

.flex-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.color_1 {
  background: tomato;
}
.color_2 {
  background: LightGreen;
}
.color_3 {
  background: PowderBlue;
}
.color_4 {
  background: SteelBlue;
}
.flex-item {
  flex: 1 0 auto;
  width: 50%;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-container">
  <div class="flex-item color_1"><div class="inner">inner</div></div>
  <div class="flex-item color_2"><div class="inner">inner</div></div>
  <div class="flex-item color_3"><div class="inner">inner</div></div>
  <div class="flex-item color_4"><div class="inner">inner</div></div>
</div>

【讨论】：