如何使用flexbox垂直居中特定的孩子？答案

【问题标题】：How to center vertically a specific child using flexbox?如何使用flexbox垂直居中特定的孩子？
【发布时间】：2019-07-02 16:39:23
【问题描述】：

我有一个带有一些子元素的父块id="parent"。其中之一id="child3" 我需要将其垂直居中按父高度。

我试过了：

#parent {
  display: flex;
}

#child3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

<div id="parent">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
</div>

元素 1 应该始终在顶部

【问题讨论】：

你的意思是child3 必须在中间，其他在上面？
是的，居中高于其他人并按父级高度
flexbox 中没有设置可以做到这一点。 - 可能重复 - stackoverflow.com/questions/31455207/…
这不是重复的，我只需要中心#child3 {}
我认为应该是 position: absolute; top: 50% - 文本高度

标签： html css

【解决方案1】：

使用 flexbox，您可以做到这一点：

只有 child-3 会垂直居中。

.parent {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid #ccc;
}
.child-3 {
  align-self: center;
}

<div class='parent'>
  <div class="child-1">1</div>
  <div class="child-2">2</div>
  <div class="child-3">3</div>
</div>

【讨论】：