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> 

這是一個codepen，可以看到它：

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

Answer 1

有某些flex屬性僅適用於flex項目，而另一些屬性僅適用於flex容器。

align-items和justify-content屬性僅適用於flex容器。 但是，您在彈性商品上使用它們...

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

...因此它們被忽略了。

您需要在上面的規則中添加display: flex 。 這將得到align-items: center以工作為align-items: center 。

但是， justify-content: center將繼續失敗，因為父級具有max-width: 20%限制水平移動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

您需要在col-inner （在scss的第40行） @include flex ，因為align-items和justify-content僅在flexbox元素上起作用（ 請參閱此便捷指南 ）。

然后，在大白框中對齊.col元素，您可以在.likeness-rank-table-body第47行.likeness-rank-table-body justify-content: center添加到.likeness-rank-table-body 。