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