css - 幅100％のボックスはページの中央にありません

Question

画面の中央にボックスを配置して、コンテンツを表示しようとしています。問題は、ボックスに設定topしたときに50%、ページの100％中央に配置されないことです。上が60％、下が40％のようなものです。

HTMLコードは次のとおりです。

​<div class="content">
    test
</div>​

そして、ここにスタイルシートがあります：

body, html {
    color: #eaeaea;
    font-family: Arial;
    font-size: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.content {
    background-color: #000000;
    padding: 10px 15px;
    position: fixed;
    top: 50%;
    width: 100%;
}​

デモ： http： //jsfiddle.net/edgren/cceSw/

私は何を逃しましたか？

前もって感謝します。

Answer 1

あなたもあなたからdivの高さを差し引く必要がありますtop。これは、に負のマージンを設定することで実行できますmargin-top。

ここを見てください-これはあなたのフィドルのアップデートです：

http://jsfiddle.net/cceSw/3/

私はあなたにheightとを追加しましたmargin-top.content

.content {
background-color: #000000;
padding: 10px 15px;
position: fixed;
top: 50%;
width: 100%;
height:50%;
margin-top:-25%;

} </ p>

コンテンツのサイズが異なる可能性がある場合は、JQueryを使用して高さを計算し、マージンを動的に設定できます。

Answer 2

divの高さの50％になる負のトップマージンを設定する必要があります。