flexbox中flex项目的垂直对齐答案

【问题标题】：Vertical alignment of flex item in flexboxflexbox中flex项目的垂直对齐
【发布时间】：2017-09-30 01:41:45
【问题描述】：

我一直在尝试通过使用所有可能的变化来调整元素以使其在各自 div 的中心对齐

align-items:center;
align-self: center;
justify-content: center;
text-align: center;

但是，我无法让弹性项目在弹性框中居中。以下是它的外观示例：https://jsfiddle.net/skd/xypmLspe/1/

Flex 集团

.flex-group {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: grey;
    align-items: center;
    align-self: center;
    justify-content: center;
    text-align: center;
}

弹性项目

.flex-group .flex {
    flex-grow: 1;
    height: 100%;
    -webkit-transition: background 0.6s;
    transition: background 0.6s;
}

.flex-group .flex:hover {
    background-color: #34373c;
}

在上面显示的 jssfiddle 示例中，我想将“Blah”和“Another Blah”对齐到 div 的中心。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以在两个内部 div 上设置 flex: 1，这样每个 div 都占父母宽度的一半，然后还添加 display: flex、align-items: center 和 justify-content: center 以使文本居中。

body {margin: 0}

.flex-group {
  display: flex;
  height: 100vh;
  background: grey;
}
.flex-group .flex {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.6s;
}
.flex-group .flex:hover {
  background-color: #34373c;
}

<div class="flex-group">
  <span class="flex">Blah</span>
  <span class="flex">Another Blah</span>
</div>

【讨论】：