なぜトップです：CSSの50％が機能していませんか？

Question

私はウェブサイトを作っていると私は中央を縦にしようとしている：

position: absolute; 
width:1200px; 
height:600px; 
top: 50%; 
left: 50%; 
margin-left: -600px; 

と私のHTMLは正確にleftとして働くtop単一div

Answer 1

CSSプロパティです。 は、その方向からdivをにプッシュします。 top:50%と書くと、divが上から50％押し下げられます。垂直にセンタリングする必要があるので、でこれを逆算して、に戻す必要があります。これは、margin-left: -600px〜のようにのままにして、margin-top: -300pxを使用して行うことができます。

position: absolute; 
width: 1200px; 
height: 600px; 
top: 50%; 
margin-top: -300px; 
left: 50%; 
margin-left: -600px; 

Answer 2

top:50%;正常に動作しますが、文句を言わない「センター」アイテム、それが上からページの高さの50％上端です配置されます。同様にあなたはmargin-left:-600px;を持ってどのようにあなたも、私は、これはややクリスチャンが与えた答えを模倣することができると信じてmargin-top:-300px;

Answer 3

を追加する必要がありますが、ここで使用した割合を含む、私の2セントをだし、また別の内部の1を示しています。

#parent { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 60px; 
    margin: -60px 0 0 -30px; 
    background: blue; 
} 
#center { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    top: 50%; 
    left: 50%; 
    margin: -12.5% 0 0 -25%; 
    background: green; 
} 

あなたがしようとしている場合http://jsfiddle.net/userdude/MYD27/

EDIT

さらにそれを見て、私はあなたが問題に遭遇するかもしれないと思います配置された要素内のコンテナではない要素でこれを行う例えば：

Full View | Code View

私は意図したとおりに動作しないと思います。私がposition: relative（あるいは、代わりにposition: absolute）を追加すると、意図したとおりに動作します。

Full View | Code View

Answer 4

私が言われて、CSSの「トップ」プロパティが正しくコンテナ要素の高さに基づいて計算されることを自己宣伝my answer to another question here on SO :)

を露骨にするために、この機会を利用したいと思います - 効果的にターゲット要素をレンダリング正中線の下にある。これは、リンクされた質問で説明されているように、要素を半分上にプッシュする必要があることを意味します。

残念ながら、このような一見簡単なタスクは、絶対ピクセルベースの値（クリスチャンAntonsenの回答の+1）を使用せずに等上部余白を調整することによって達成することができない - 1「はマージントップ設定想像-50 ％は」ちょうどそれを意味しますが、あなたがセンターに

calc(%50 - (items_height/2)); 

を使用することができます

Answer 5

a percentage always relative to the width of the containing blockとしてのCSSの仕様に応じて、でも縦軸上のマージン値が計算されます。

Answer 6

あなたが作業しているもののサイズがわからない場合、私はこのきちんとした解決策が見つかりました：

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

は（ページ上のコードの最後のビットまでスクロール）

Answer 7

私はこれが参考にすべきだと思います:)

i{ 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<i>center</i>

Answer 8

が機能しない理由について質問に答えるには、要素にtopというプロパティを使用すると、その要素の親要素に静的な高さが設定されている必要があります。これは、pxまたはパーセント以外の単位にする必要があります。あなたが本当にあなたの親でパーセントを使用する必要があるなら、あなたはその親の親である次の親に移動し、その1つを静的な固定高さにすることができます。

何かを垂直にセンタリングする。 I prefer to use this method

要素の高さの幅を知る必要がないため、CSS transformを使用します。

position: relative; 
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 

ブラウザ/ベンダープレフィックスを追加することを忘れないでください。

You can refer here for vendor prefixes.

---

あなたは親の高さがわからない場合。

1. JavaScriptが親要素の自然な高さを取ると、あなたが直前に撮った値にその親要素の高さプロパティを設定使用： 2つのオプションがあります。親要素の高さが、センタリングする要素に兄弟である別の子要素によって引き起こされている場合、このメソッドを使用できます。

$('.parent').height($(this).height());

.parent { 
 
    /* Unkown height */ 
 
} 
 

 
.child { 
 
    /* Create columns */ 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.child-1 { 
 
    position: relative; 
 
    top: 50%; 
 
    text-align: center; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -o-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Example Start --> 
 
<div class="parent"> 
 
    <div class="child child-1"> 
 
    Lorem ipsum 
 
    </div> 
 
    <div class="child child-2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

ヒント：あなただけのブラウザのサイズ変更にJavaScriptで再び高さを設定し、懸念に応答を取っている場合。 JavaScriptで高さをautoに設定して新しい高さを取得し、そのプロセスをやり直すことができます。

2. 上記の考え方には傷を付けて、display: tableを中心に使用することができます。​​。