如何在所有監視器/解決方案/瀏覽器中居中放置一個Div？

我已經創建了我自己的燈箱，問題在於它顯示在我的顯示器中心，但不在更寬的顯示器或更大的分辨率。如何在所有監視器/解決方案/瀏覽器中居中放置一個Div？

在所有分辨率/顯示器/瀏覽器中居中對齊div的最佳方式是什麼？

來源

2009-12-02 Sarfraz

中心的水平，垂直或兩者兼而有之？如果你想要兩個，this已經爲我工作過去。否則，答案sathish posted是良好的水平只有定心

來源

2009-12-02 06:20:37

嘗試使用此

製作父DIV風格爲中心，用margin: 0 auto;孩子DIV

#parentDiv{ 
text-align: center; 
} 

#main{ 
margin:0 auto; 
width:755px; 
text-align: left; 
}

<div id="parentDiv"><div id="main">Content</div></div>

來源

2009-12-02 06:09:49 sathish

舊的文本對齊黑客？我們不能放棄IE <= 5.5嗎？ – Quentin 2009-12-02 16:49:16

如果您知道寬度：

<div></div> 

div { 
    left: 50%; 
    margin-left: -50px; /* width/2 */ 
    width: 100px; 
}

來源

2009-12-02 09:09:03 FrankBr

這是一個可怕的方法，導致了左 - 無滾動條問題。 – Quentin 2009-12-02 16:49:48

那是什麼？從來沒有問題:) – FrankBr 2009-12-03 07:48:23

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /must be half of the height/ 0 0 -200px; /must be half of the width/}

，將水平和垂直居中div中。關於其第一位職位的親屬：親屬;

來源

2009-12-02 10:10:30 tbwcf

這是一個可怕的方法，導致了左 - 無滾動條問題。 – Quentin 2009-12-02 16:50:20

好，如果你設置一切使用

*{margin:0 auto;}

這將集中在文檔中任何事情爲中心，除非特別指出

，或者您可以使用一個包裝DIV

div#wrapper {margin:0 auto;}

您使用較舊的瀏覽器，您應該使用

div#wrapper {text-align:center;}

有喜歡做的30種方法，還挺取決於你做什麼...

這些是最容易的

來源

2009-12-02 16:47:19 Evilalan

坐落在格的寬度，然後給它一個定心類：

.center 
{ 
margin:0 auto; 
}

它將在任何瀏覽器中居中。

來源

2009-12-02 18:55:36 tahdhaze09

雖然上面的所有答案似乎都是正確的，但我確實在這一刻卡住了這一點。這是我的簡化方法。

假設你有下面的代碼，並且你想要在div'storyline-container'中的內容居中。

<body> 
    <div class="storyline-container"> 
     <script src=storyline.js type="text/javascript"></script> 
    </div> 
</body>

只需編寫下面的代碼將無法正常工作，因爲你還需要中心對齊父DIV在這種情況下是「身體」

.storyline-container 
{ 
    text-align: center; 
}

添加下面的代碼在你的CSS文件解決你的問題。

body{ 
    text-align: center; 
}

來源

2016-12-28 23:50:43

如何在所有監視器/解決方案/瀏覽器中居中放置一個Div？

回答

相關問題