CSS - 如何將可變高度和寬度的div居中放置在另一個div的中心？

我遇到了在div中居中div的一些方法，但這些通常需要中心元素具有固定的寬度和高度。有一種方法來做到這一點，如果內DIV爲中心將是可變的寬度和高度的（例如：爲中心的固定大小的幀內部的圖像，並且圖像可能是可變的寬度/高度的）CSS - 如何將可變高度和寬度的div居中放置在另一個div的中心？

來源

2010-10-27 Extrakun

你也可以用Javascript嗎？ – Starx 2010-10-28 06:04:49

是的，如果有必要的話 – Extrakun 2010-10-28 06:24:30

唯一的方法在所有瀏覽器中心可變寬度（據我所知）是

<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>

或JavaScript

至於中間水平，這將迫使你使用JavaScript（我認爲）

來源

2010-10-27 13:53:17

分因爲寬度很容易...您可能已經知道這一點，但只需將左右邊距設置爲自動。不幸的是，對於身高來說，我只看到了奇怪的定位解決方法。你會認爲他們會爲頂部/底部做出類似的保證金，但唉，不。我會盡力找到解決方法的鏈接。

<div style='width:400px;height:200px;background-color:#CCCCCC;'> 
    <div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'>&nbsp;</div> 
</div>

編輯：找到鏈接，可能在垂直部分幫助：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

來源

2010-10-27 13:58:16

老實說，儘管我喜歡做css定位和避免表格，當我需要在中間垂直對齊時，我仍然使用表格甚至非表格數據而不是CSS定位修補程序就像我發佈的鏈接一樣。 – 2010-10-27 14:07:18

根據我的經驗，這不適用於IE。 IE忽略邊界自動設置，並將元素放在左側。任何意見？ – Sheen 2010-10-27 14:08:25

你的DOCTYPE是什麼？上面的例子適用於XHTML過渡：<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 dtd「> – 2010-10-27 20:46:23

水平居中可以用CSS來實現：

#containerDiv { 
    text-align:center; 
} 

#innerDiv { 
    margin: 0 auto; 
    text-align: left; 
}

對於垂直居中使用JavaScript，如果containerDiv沒有固定的高度。

來源

2010-10-27 14:03:53

注意：如果沒有在內部容器上設置固定寬度，這將無法用於塊級元素。如果您不知道內部容器的寬度，請將其設置爲顯示：inline-block，並將其正確居中。另一種選擇（如果你不是內嵌塊的粉絲）是使用[這裏記錄的技術]（http://stackoverflow.com/questions/3206735/centering-a-div-horizontally-with-variable-寬度 - 不工作 - 在-IE/3207432＃3207432）。 – nickb 2011-03-18 00:49:28

IE需要頂級元素上的「text-align：center」。

例如，你的身體素有「文本對齊：中心」，和你的容器有「保證金：0汽車」。然後IE將它居中。

如果您不希望其內容居中，您可以將「文本對齊」設置回容器左側。

來源

2012-01-10 21:17:25 Emilie

您可以使用顯示屬性to make a table-cell out of it：

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV>

然而，這一建議並沒有真正爲我工作。但是這樣做：

https://stackoverflow.com/a/6284195/156481

來源

2012-02-23 12:53:12 acme

CSS - 如何將可變高度和寬度的div居中放置在另一個div的中心？

回答

相關問題