將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的中間，高度爲百分比時

回答

相關問題