子の要素を親の中心から垂直方向にオフセットするにはどうすればよいですか？

Question

Hereは私が設定したjsFiddleです。

親要素と子要素の高さは不確定です（変更されることを意味します）。子要素の位置は絶対値でなければなりません。

子要素を親の中心から5ピクセル分垂直にオフセットするにはどうすればよいですか？

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

私が正しくあなたを理解した場合は、垂直方向に5つのピクセルで子供を相殺したいです。これは、要素が親の中央から上下に移動する必要があるかどうかはわかりませんが、は上に移動する例、hereは下に移動する例です。

ここで私はそれを上に移動するために、子供のCSSに追加したコードです：

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

また、子供のための現在のtopとbottom宣言を削除するには。

親の上から50％を設定し、それを中央に配置した上のオフセットからその高さの半分を引きます。そのオフセットに5ピクセルを加算（または減算）してさらにオフセットします。高さが可変の場合

、（これは、5つのピクセルを、それを上に移動）このCSSを使用します。

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

Example。下; 0：0;

Answer 3

使用border-top
私のここFiddleトップと

• を参照してください。マージン：自動;親要素と子要素の高さが「不確実」である場合、子要素は中間に揃えることができます。

• border-top：10px;子要素オフセットを作ることができます。

と多分あなたは、あなたがあなたの質問に言い換えることができます