如何從父級中心垂直偏移子元素？

Question

Here是我設置的jsFiddle。

父元素和子元素的高度是不確定的（意味着它會在之後改變）並且子元素的位置必須是絕對的。

如何將子元素垂直偏移距父元素中心五個像素？

HTML：

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS：

.parent{ 
    position:relative; 
    margin: 10% auto; 
    background:lightgray; 
    height:50px;/*parent's height will change after*/ 
    width:200px; 
} 
.parent .child{ 
    position:absolute; /* needs to be absolutely position */ 
    top:0; 
    bottom:0; 
    margin:auto; 
    width:100%; 
    height:20px;/*child's height will change after*/ 
    background:darkgray; 
} 

Answer 1

偏移5px的地方？

像這樣---->Updated Fiddle

或

像這樣---->Updated Fiddle

Answer 2

如果我理解正確的話，那麼你要通過五個像素垂直偏移孩子。我不確定這是否意味着元素應該從父級中間向上或向下移動，但是here是向上移動的一個示例，here是用於移動它的示例。

這是我加入到孩子的CSS代碼將它移動起來：

top:50%; 
margin-top:-15px; 

同時刪除當前top和bottom聲明的孩子。

我們從父母的頂部設置它50％，然後從它的居中頂部偏移量中減去它的一半高度。我們在該偏移量上添加（或減去）5個像素以進一步對其進行補償。

對於可變的高度，使用該CSS（此移動它向上五個像素）：

top:-5px; 
bottom:0; 
margin:auto; 

Example。

Answer 3

使用border-top
見我Fiddle這裏

• 與頂部：0;底部：0;和margin：auto;子元素可以在父母子元素的高度「不確定」時對齊中間;

• border-top：10px;可以使子元素偏移。

，也許你會解決你的問題