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

我有这个侧面窗格。它的高度是80％。在这个侧面我有一个文本。我希望这总是在中间。将div放在另一个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

来源

2015-03-31 Per

我不明白这一点。 ***这个问题可以问多少次！？！*** – jbutler483 2015-03-31 07:56:48

你可以垂直于母公司的中间通过定位孩子absolute LY和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

来源

2015-03-31 07:50:04

我只是写了关于结合变换属性！ – jbutler483 2015-03-31 07:58:07

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

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

为您的“主要内容”

来源

2015-03-31 08:04:58

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

回答

相关问题