DIVを縦と横の中心に揃える方法

Question

Divのクラス "Window"の中心にdiv id "loader"を浮かべる人を助けてくれますか？ありがとう。

<div id="someid" class="Window"> 
    <div id="loader"></div> 
</div> 

更新*ブロックの真ん中に配置する必要があります。クラス "ウィンドウ"が400px高いと言います。どのように私は、「ローダーは、その中心部（高さ/幅）に浮遊するのですか

Answer 1

"ローダ" に次のCSSを適用します。

• 位置：相対
• 上部：50％
• マージン - {E} PX自動自動自動

{E }は「ローダー」の高さの半分です

これは役立ちます。

Answer 2

#someid.Window{ 
    // give this some width 
    width: 100% 
} 

#loader{ 
    // give width and margin auto on the sides 
    width: 100px; 
    margin: 0 auto; 
} 

Answer 3

あなたのCSSにこれを追加します？

#loader { 
    width: 123px; 
    margin:0 auto; 
} 

これはあなたの左右の余白を自動的に計算するようになります。

Answer 4

http://jsfiddle.net/sfKR2/

#someid { 
    width:200px; 
    height:200px; 
} 
#loader { 
    position: relative; 
    height:80px; 
    width: 80px; 
    top: 50%; 
    margin-top: -40px; /* half of the height */ 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 5

書き込みこの：

.window{ 
    height:400px; 
    width:400px; 
    background:red; 
    vertical-align:middle; 
    line-height:400px; 
    text-align:center; 
} 
#loader{ 
    width:20px; 
    height:20px; 
    background:green; 
    display:inline-block; 
    vertical-align:middle; 
} 

チェックはこのhttp://jsfiddle.net/dxPfz/