html - Flexbox - 证明内容 : center and align-items: center not working?

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 属性仅适用于 flex 容器。

align-items 和 justify-content 属性仅适用于 flex 容器。然而，您正在 flex 元素上使用它们...

.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 */
}

Revised Codepen

这是一个有用的 flex 属性列表，按父子属性分类:https://css-tricks.com/snippets/css/a-guide-to-flexbox/