Flexbox-元素位于顶部，另一个位于中心 [英] Flexbox - element on the top, another to center

问题描述

如何实现这样的目标？ #find 必须垂直和水平居中。

How can I achieve something like this? #find must be vertically and horizontally centered.

这是我的代码

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

更多代码为此处

推荐答案

Flexbox已将设置设置为利润到自动的功能要强大得多。现在，沿着弹性轴这样做会占用所有剩余空间，然后再在弹性项目之间进行划分。这是CSS的圣杯，真正的垂直居中。

Flexbox has made setting margin to auto a whole lot more powerful. Doing so along the flex axis now takes up any remaining space before dividing it up between the flex items. This is the holy grail of CSS, true vertical centering.

当内容不够高时，我经常使用它来将页脚向下推到页面底部。 Flex很棒。

I often use this to push footers down to the bottom of the page when the content is not tall enough. Flex is awesome.

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

这篇关于Flexbox-元素位于顶部，另一个位于中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！