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

你可以这样做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%以使其水平居中

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 个答案: