如何對齊DIV垂直和水平中心

有人可以幫助我獲得div id「loader」浮在div class「Window」的中心。謝謝。如何對齊DIV垂直和水平中心

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

UPDATE *我需要居中它在一個塊的絕對中間。可以說類「窗口」是400px高。我如何獲得「裝載機漂浮在該中心（高/寬）

來源

2012-02-22 Joe

我需要居中塊中的絕對中心。可以說類「窗口」是400px高。我如何獲得「裝載機漂浮在中心（高度/寬度）？ – Joe 2012-02-22 17:27:19

這樣的事情？http://jsfiddle.net/sfKR2/我要編輯我的答案.. – Fabian 2012-02-22 17:34:22

關閉Fabian。SenorAmor得到它接近我所需要的。謝謝你:) – Joe 2012-02-22 17:44:13

應用下面的CSS來「裝載機」：

位置：相對
頂部：50％
保證金： - {E}像素自動自動自動

其中{É }是「裝載機」的一半高度

希望這會有所幫助。

來源

2012-02-22 17:29:11 SenorAmor

你可以做保證金：-25％的汽車自動自動，而不在意裝載機的高度是多少？ – n8wrl 2012-02-22 17:38:21

如果您仍然希望它垂直居中，則不需要。 'top：50％'將內部div降至其母公司div高度的50％。然後，'margin： - {E} px'部分將內部div移回。我們將其移動一半高度，以保持垂直居中。 – SenorAmor 2012-02-22 18:04:02

當在寬度和高度均設置爲100％的包裝中使用時，這似乎不起作用。 – 2013-01-03 16:24:18

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

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

來源

2012-02-22 17:21:14 ggreiner

我需要居中它在一個塊的絕對中間。可以說類「窗口」是400px高。我怎麼得到「裝載機漂浮在中心（高度/寬度）呢？ – Joe 2012-02-22 17:27:45

k，你是否可以改變你的問題，提及你想要將'＃loader' div垂直居中*和*。 – ggreiner 2012-02-22 17:28:54

添加到您的CSS：

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

這會讓你的左，右頁邊距自動計算。

來源

2012-02-22 17:21:23

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; 
}

來源

2012-02-22 17:22:10 Fabian

這樣寫：

.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/

來源

2012-02-22 17:33:45 sandeep

如何對齊DIV垂直和水平中心

回答

相關問題