Flexbox - 将元素置于顶部，另一个元素居中

Question

我该如何实现类似于这样的效果？#find 必须在垂直和水平方向上居中。

这是我的代码

#main {
    min-height: 50vh;
    display: flex;
    justify-content: center;
}
#menu {
    padding: 20px 0px;
    font-size: 1em;
}
#find {
    width: 310px;
    min-height: 320px;
    position: relative;
}

更多的代码在这里

- Karolina Ticha

---

这可能会有所帮助：对齐Flex项目的方法 - Michael Benjamin

Answer 1

要实现这个，您可以在#menu上使用position: absolute:和flexbox，如下所示。

#main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #B8E986;
  justify-content: center;
  position: relative;
}

#menu {
  padding: 20px 0px;
  font-size: 1em;
  background: #D0021B;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#find {
  width: 50px;
  min-height: 50px;
  background: #F5A623;
}

<div id="main">
  <div id="menu">
    Menu div
  </div>
  <div id="find">
    Find div
  </div>
</div>

或者你可以创建另一个子 div 并将 display: flexbox; 设置为父元素。

#main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #B8E986;
}

#menu {
  padding: 20px 0px;
  font-size: 1em;
  background: #D0021B;
  width: 100%;
}

#find {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}

.center {
  width: 50px;
  min-height: 50px;
  background: #F5A623;
}

<div id="main">
  <div id="menu">
    Menu div
  </div>
  <div id="find">
    <div class="center">
      FInd div
    </div>
  </div>
</div>

- Nenad Vracar

Answer 2

Flexbox已经使得设置margin为auto变得更加强大。在flex轴上这样做现在会占用任何剩余的空间，然后在flex项目之间分配它。这是CSS的终极目标，真正的垂直居中。

当内容不够高时，我经常使用这个方法将页脚推到页面底部。Flex非常棒。

#main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #B8E986;
}

#menu {
  padding: 20px 0px;
  font-size: 1em;
  background: #D0021B;
  width: 100%;
}

#find {
  width: 50px;
  min-height: 50px;
  background: #F5A623;
  
  margin-top: auto;
  margin-bottom: auto;
}

<div id="main">
  <div id="menu">
    Menu div
  </div>
  <div id="find">
    Find div
  </div>
</div>

- Huba Nagy