html - 使用显示 : table 在 div 内居中 div

Question

我有以下内容:

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
  display: inline-block;
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

我不明白为什么最里面的 div 没有居中？我确实在这里查看了一些关于居中的答案，但是我看不出问题是什么...

我希望问候垂直于中心而不是水平居中。 所有其他 div 都按照我想要的方式定位。由于某种原因，它们并排放置的其他 div 没有错误。我想要的唯一改变是 hello div 垂直移动到中心

Answer 1

你只是用

覆盖了你的内部 div

#outterFields div {
    display: inline-block;
}

只需删除它，或者如果您想要一个直接的 child :

#outterFields > div {
    display: inline-block;
}

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
 /* display: inline-block; */
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>