水平居中DIV，與頂部或底部的距離固定，在窗口中不滾動

Question

假設我有一個div，我想水平居中，並設置為與窗口頂部或底部的固定距離。 我想將其寬度設置為75％，並根據動態內容將其高度設置為可變。 該頁面永遠不會有超出視口的內容，因此它不會滾動。 如何使用CSS做到這一點？ HTML基本上在這里：

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

Answer 1

你可以像這個演示一樣

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%使之水平居中

Answer 2

您可以像這樣划分頁面寬度：

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

Answer 3

無論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/

水平居中DIV，與頂部或底部的距離固定，在窗口中不滾動

問題描述

3 個解決方案

解決方案1
2 已采納 2012-10-30 06:02:51

解決方案2
1 2012-10-30 06:03:58

解決方案3
1 2012-10-30 06:10:58

水平居中DIV，與頂部或底部的距離固定，在窗口中不滾動

問題描述

3 個解決方案

解決方案1 2 已采納 2012-10-30 06:02:51

解決方案2 1 2012-10-30 06:03:58

解決方案3 1 2012-10-30 06:10:58

解決方案1
2 已采納 2012-10-30 06:02:51

解決方案2
1 2012-10-30 06:03:58

解決方案3
1 2012-10-30 06:10:58