當高度為百分比時，將div放在另一個div的中間

Question

我有這個窗格。 它的高度是80％。 在此窗格中，我有一個文本。 我希望這總是在中間。

主div：

.simulation {
  height: 80%;
  width: 500px;
  border: 1px solid #ccc;
  box-shadow: 8px 8px 7px #A5A5A5;
  background: #FFF;
  position: absolute;
  top: 10px;
  z-index: 100;
  left: -450px;
  transition: 500ms ease all;
}

細分：

.simulation .simulation-content .simulation-bar .heading {
  position: relative;
  margin-top: 340px; /* How do I get this in the middle?? */
  -webkit-transform: rotate(-90deg);
}

當我用％表示時，我無法獲得右上角。

Plunkr： http ：//plnkr.co/edit/Z8xZNYLNvShQDVPZMZgk？p = preview

Answer 1

您可以通過absolute放置子元素以及top: 50%和transform: translateY(-50%)的組合，將子元素垂直對齊到父元素的中間。

在這種特定情況下- 示例 ：

.simulation .simulation-content .simulation-bar .heading {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-30%, -50%) rotate(-90deg);
  -moz-transform: translate(-30%, -50%) rotate(-90deg);
  -ms-transform: translate(-30%, -50%) rotate(-90deg);
  -o-transform: translate(-30%, -50%) rotate(-90deg);
  transform: translate(-30%, -50%) rotate(-90deg);
}

可以在這里找到解釋：

• 如何居中“位置：絕對”元素

Answer 2

您也可以使用flexboxes實現它。 只需添加：

display: flex;
  flex-flow: column nowrap;
  justify-content: center;

您的“主要內容”