垂直对齐div在另一个div内，没有弯曲

Question

如何使用属性vertical-align:middle在另一个div中垂直对齐div。

这是我的代码。

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}
.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
}

<div class ="parent ">
  <div class="hello">
    hello
  </div>
</div>    

我提到并发现父表table-cell属性和子内联块工作但仍然没有。

HTML

Answer 1

你走了。

代码段：

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}

.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="parent ">
  <div class="hello">
    hello
  </div>
</div>

Answer 2

vertical-align仅适用于display：table-cell，在某些浏览器中，您应该使用display：table

包装父级

400 Bad Request

Answer 3

在vertical-align: middle上使用.parent并使用.hello制作display: block - margin: 0 auto，例如：

.hello {
  display: block;
  margin: 0 auto;
}

.parent {
  display: table-cell;
  vertical-align: middle;
}

请看下面的代码段：

＆＃13;

＆＃13;

.hello{
  height:100px;
  width:100px;
  background-color:black;
  display: block;
  margin: 0 auto;
  color: white;
}

.parent{
  height:400px;
  width:400px;
  border:1px solid red;
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<div class ="parent ">
  <div class="hello">
  hello
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！