居中DIV水平和固定的距離從頂部或底部，沒有在窗口滾動

說我有一個div，我想水平居中，並設置在從窗口的頂部或底部固定的距離。我想將其寬度設置爲75％，其高度根據動態內容而變化。該頁面永遠不會有內容延伸過視口，因此不會滾動。我怎樣才能做到這一點與CSS？ HTML是在這裏，基本上是：居中DIV水平和固定的距離從頂部或底部，沒有在窗口滾動

<body> 
    <div id="main"> 
    <div id="div_in_question"> 
     Omg stuff goes here it will probably change though via jQuery. 
    </div> 
    </div> 
</body>

來源

2012-10-30 NaOH

爲什麼你會絕對定位呢？你應該把它放在相對位置，它會表現得更好。 –

你可以像下面這樣做Demo

HTML

<div class="container"></div>

CSS

.container { 
    height: 300px; 
    width: 75%; 
    position: absolute; 
    background-color: #ff0000; 
    margin-left: -37%; 
    left: 50%; 
}

說明：給position: absolute;你div和真實詭計讓它水平居中是給margin-left這將是你一半的div的總寬度，並給予left爲50%要拿水平居中

來源

2012-10-30 06:02:51

這裏是網頁：http://new.e17.paca.arvixe.com/對於一些reasion我無法得到這個工作。它很接近，但是你可以看到你是否調整窗口的大小，但它不是完全居中，而是靠近窗口的右側（至少在Chrome中）。任何想法爲什麼會發生？ – NaOH

@NaOH這是因爲你正在使用絕對定位的'div' –

哦？那有什麼關係呢？ – NaOH

可以瓜分頁面寬度像這樣：

margin-left:14.5%; 
margin-right14.5%; 
width:75%;

來源

2012-10-30 06:03:58

你是從保持距離固定的頂部或底部，無論div中的內容量如何？

如果是的話，你可以嘗試這樣的事：

<div id='outer'> 
    <div id='inner'>      
     SOme text hereSOme text hereSOme text hereSOme text hereSOme text hereSOme 
    </div> 
</div>

和CSS類：

#outer{ 
height:150px; 
background-color:red 
} 

#inner{ 
width:75%; 
height:auto; 
background-color:yellow; 
max-height:100%; 
overflow:hidden; 
margin-left:14.5%; 
margin-right:14.5% 
}

http://jsfiddle.net/hbRHW/

來源

2012-10-30 06:10:58 Achint

居中DIV水平和固定的距離從頂部或底部，沒有在窗口滾動

回答

相關問題