为什么垂直对齐：中层在我的span或div上不起作用？

Question

我正在尝试将一个span或div元素垂直居中放置在另一个div元素中。但是当我放进去时vertical-align: middle，什么也没发生。我尝试更改display两个元素的属性，但似乎没有任何效果。

这是我目前在网页中执行的操作：

.main {

  height: 72px;

  vertical-align: middle;

  border: 1px solid black;

  padding: 2px;

}



.inner {

  vertical-align: middle;

  border: 1px solid red;

}



.second {

  border: 1px solid blue;

}


<div class="main">

  <div class="inner">

    This box should be centered in the larger box

    <div class="second">Another box in here</div>

  </div>

</div>

Answer 1

这似乎是最好的方法-自我的原始文章以来已经过去了一段时间，现在应该这样做：

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>