css - 「トップ: 50%」が機能しないのはなぜですか?

Question

ページの中央にローディング アニメーションが必要です。これはのスタイルです<div id="loading">

#loading{
    position: absolute;
    top: 50%;
    left: 50%;
}

しかし、それは中心になく、その理由はわかりません。これは読み込み中の jsfiddle ページです。誰でも私を助けることができますか？

Answer 1

#loading{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;  /* half of your element's height */
    margin-left: -25px; /* half of your element's width */
}

デモ

垂直センタリング手法についてもう少し読みたいと思うかもしれません（あなたの場合は方法2です）

Answer 2

と を使用するtopとleft、左上隅がオフセットされます。 左下bottomをオフセットします。left

基本的に、#loading の中心を中央に配置する必要があることをブラウザに伝えているのではなく、左上隅を中央に配置する必要があります。

---

編集: div を水平方向にセンタリングするより有望な方法は、を使用することmargin: 0 auto;です。そうすれば、div の幅によるカウンターに対処する必要がなくなります。

これを垂直に行うCSSの行を知りません。

Answer 3

ローディング スピナーの高さと幅を考慮していないため、上部と左側の 50% 未満になります。

誰もが私を次の部分に打ち負かしましたが、はい、常にdivide / 2あなたのdiv/image/etcの高さと幅であり、それはその負の上部と左マージンを作ります.

あなたの場合、画像は幅と高さが50pxで、2で割ったもので、-25pxを使用したい

margin-top: -25px;
margin-left:-25px;

これは、負のマージンのトリックに関する良い記事です

Answer 4

どうぞ：

http://jsfiddle.net/skq7Y/5/