Html CSS Flexbox-在两个div之间居中放置一个div

我有一个导航和搜索按钮之间的标志，我想在页面中心的标志。使用水平自动边距使中心div向右移动，因为左侧的内容更大

.flexbox{
显示器：flex；
}
.标志{
保证金：0自动；
}

标志
搜索

为您的css尝试此功能

它使div在显示器上具有一定的宽度，并使徽标文本居中

.flexbox{
显示器：flex；
}
.左导航{
宽度：25%；
}
.标志{
宽度：50%；
文本对齐：居中；
}
.右搜索{
宽度：25%；
}

标志
搜索

或

---

不要忘记添加供应商前缀。

您需要设置一个flex-basis值，然后在这些元素上设置收缩值，这样它们就可以根据其基础拥有相应的宽度。 您还需要声明

align items:center

.flexbox{
显示器：flex；
对齐项目：居中；
}
.flexbox>div{
弹性基准：33%；
}
.左导航{
柔性流：柱包裹；
弹性收缩：2；
}
.标志{
弹性收缩：1；
文本对齐：居中；
}
.右搜索{
弹性收缩：2；
}

标志
搜索

.flexbox {
  display: flex;
}
.left-nav,
.right-search {
    flex: 0 0 25%;
}
.logo {
  flex: 0 0 50%;
  text-align: center;
}