当高度为百分比时，将 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;
}

子 div:

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

当我用 % 表示时，我无法获得 margin-top 权利。

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

Answer 1

您可以通过将子元素 absolutely 以及 top: 50% 和 transform: translateY(-50%) 的组合在父元素的中间垂直对齐子元素。

在此特定情况下 — Example:

.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);
}

可以在这里找到解释：

How to center a "position: absolute" element

Answer 2

您也可以使用 flexboxes 来实现它。只需添加：

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

给你的"main-content"

当高度为百分比时，将 div 放在另一个 div 的中间

Put a div in the middle of another div when height is in percent

html

css

vertical-alignment