Html 使用flexbox垂直居中项目-对齐项目：居中不'；不行？

我使用这个样式使进度条填充div中的空白区域（唯一的其他项是按钮）

现在的问题是

align items:center

没有垂直居中进度条。我也尝试在孩子身上使用

align content:center

，但没有效果

这是代码，以防你没有打开链接

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1;
}

标记：

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

左边
赖特

有人能告诉我我做错了什么吗？提前谢谢

这就是它的样子：

---

flex容器将仅对其直接子级启用flex上下文。因此，您的“进度条”div遥不可及。同样，您的紫色背景栏位于flex容器（包装器）之前，所以也不要期望它的内容居中。你可以检查一下

检查此代码：

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
      <div class="wrapper">
        <div class="left">
          left
        </div>
        <div class="right">
          right
        </div>
      </div>
    </div>
  </div>
</div>

左边
正确的

---

基于您的代码的笔

我想您可以执行以下操作以使其正确：

.progress

元素有一个

边距

，首先可以将其置零：

.wrapper > .left > .progress {
  margin: 0;
}

为

包装提供100%的高度

我还删除了包装容器的

height:10vh

，以便完成工作

请参阅下面的示例和代码片段：

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
身体{
利润率：10px；
}
.包装纸{
显示器：flex；
对齐项目：居中；
宽度：100%；
背景：#ccc；
身高：100%；
}
.wrapper>.left{
背景：#fcc；
弹性：1；
}
.wrapper>。对{
背景：#共因失效；
}
.wrapper>.left>.progress{
保证金：0；
}

Меню

尝试添加

  align-items: center;
  justify-content: center;

到您的

.wrapper

类

下面是一篇关于FlexBox定位的好文章：

---

代码看起来不错。应该有用。这里还有别的事情在起作用。您应该发布一个重现问题的演示。您的意思是，flexbox容器位于引导列中，这是我想到的一件事。我将尝试制作一个可复制的jsfiddle我在这里复制了这个行为-是的，我终于从Chrome开发工具的.progress中找到了20px的余量。感谢您抽出时间，这正是问题所在：）