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;
}

更多代码为here

Answer 1

要执行此操作，您可以在position: absolute:上使用 flexbox 与#menu一样

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox已将margin设置为auto，功能更强大。沿着flex轴这样做现在占用任何剩余空间，然后在flex项之间进行分割。这是CSS的圣杯，真正的垂直居中。

当内容不够高时，我经常使用此功能将页脚向下推到页面底部。 Flex非常棒。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;