Flexbox - 对齐内容：居中和对齐项目：居中不起作用？

Question

我有一个非常基本的 Flex 设置，并且无论出于何种原因，有问题的 div 不会在其父标签内垂直居中。您可以在下面看到孤立的测试用例。

.likeness-rank-table {
  border-radius: 3px;
  margin-bottom: 20px;
  display: block;
}
.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
  display: flex;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
  display: inline-block;
  float: left;
  width: 20%;
  margin-bottom: 5px;
}
.draggable-tag {
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
  position: relative;
  padding: 10px 0;
  background-color: #63b3ce;
  color: #fff;
}

<div class="likeness-rank-table">
  <div class="likeness-rank-table-body">
    <div class="col">
      <div class="col-inner droppable">
        <div class="draggable-tag ui-draggable">
          <div class="draggable-tag-inner">
            This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个代码笔来查看它：

http://codepen.io/trevorhinesley/pen/grQKPO

Answer 1

某些 Flex 属性仅适用于 Flex 项目，而其他属性仅适用于 Flex 容器。

align-items

和

justify-content

属性仅适用于弹性容器。然而，您在弹性项目上使用它们......

.likeness-rank-table .col .col-inner {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 150px;
}

...所以他们被忽略了。

您需要将

display: flex

添加到上面的规则中。这将使

align-items: center

发挥作用。

但是，

justify-content: center

将继续失败，因为父级有

max-width: 20%

限制水平移动。

.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;            /* limits horizontal centering of child element */
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}

因此，将水平居中应用到上一级的父级。

.likeness-rank-table .likeness-rank-table-body {
  display: flex;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #a2a5a7;
  justify-content: center;    /* new */
}

修订版Codepen

这是按父级和子级细分的有用的 Flex 属性列表：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您需要在

@include flex

（scss 的第 40 行）上

col-inner

，因为

align-items

和

justify-content

仅适用于 Flexbox 元素（请参阅此便捷指南）。

然后要对齐大白框中的

.col

元素，您可以将

justify-content: center

添加到 scss 第 47 行的

.likeness-rank-table-body

。

Answer 3

您可以简单地通过添加 flex-grow: 1; 来做到这一点到子类并从父类中删除 justify-content center 。