Html flexbox不工作时的垂直中心

我试图在引导网格中使用flexbox来创建一个项目垂直居中的精简菜单，但它不起作用。我尝试使用中介绍的样式，但显然我仍然有一些不正确的地方

加成

---

问题是

。secondary-nav\uuu list-items

是您的flex父项，但它的高度不消耗

的高度。secondary-header

具有蓝色背景，是您希望

中的项目居中的位置

您可以确保
.secondary-header
和
.secondary-nav\uu list-items
之间的所有内容都具有100%的高度，以便
.secondary-nav\uu list-items
与
.secondary-header
一样高，或者只需将高度/背景移到
.secondary-nav\uu list-items


.secondary-nav\u列表项{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.二级导航{
高度：60px；
显示器：flex；
}
.二级导航列表项{
列表样式类型：无；
高度：60px；
背景色：#2bf；
}
.辅助导航列表项{
边框：1px实心；
显示器：flex；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
}
.辅助导航列表项{
显示：内联；
颜色：#fff；
}



选项


选项


选项


问题在于
。secondary-nav\u list-items
是您的弹性父项，但它的高度不消耗
的高度。secondary-header
具有蓝色背景，并且是您希望
中的项目居中的位置。secondary-nav\u list-items

您可以确保
.secondary-header
和
.secondary-nav\uu list-items
之间的所有内容都具有100%的高度，以便
.secondary-nav\uu list-items
与
.secondary-header
一样高，或者只需将高度/背景移到
.secondary-nav\uu list-items


.secondary-nav\u列表项{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.二级导航{
高度：60px；
显示器：flex；
}
.二级导航列表项{
列表样式类型：无；
高度：60px；
背景色：#2bf；
}
.辅助导航列表项{
边框：1px实心；
显示器：flex；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit盒包：中心；
-webkit内容：中心；
证明内容：中心；
}
.辅助导航列表项{
显示：内联；
颜色：#fff；
}



选项


选项


选项



  <section class="container secondary-header">
    <div class="row">
      <div class="col-xs-6">
        <nav class="secondary-header__nav">
          <ul class="secondary-nav__list-items">
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
            <li class="secondary-nav__list-item">
              <a class="secondary-nav__link">Option</a>
            </li>
          </ul>
        </nav>        
      </div>
      <div class="col-xs-6">&nbsp;</div>
    </div>
  </section>

.secondary-header {
  height: 60px;
  background-color: #2bf;
}
.secondary-nav {

  &__list-items {
    display: flex;
      align-items: center;
    justify-content: space-between;    

  }  

  &__nav {
    height: 60px;
    display: flex;
  }

  &__list-items {
    list-style-type: none;
  }

  &__list-item {
    border: 1px solid;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;    
    // height: 60px;
  }

  &__list-item {
    display: inline;
    color: #fff;
  }

}