Question

我想在页面中间放置一个div。我在互联网上找到的解决方案假设div将是静态大小。我需要div在中间，如果内容是正确的大小，但如果它超过div的大小，它应该变大，并最终允许滚动而不改变宽度。

PS：我不需要支持IE，只需要XULRunner（Firefox）和基于Webkit的浏览器。

编辑：整个页面必须是可滚动的，而不仅仅是内容div。我需要保留所有换行符。

How I want to do it alt text

Answer 1

你走了：

<style>
    .container{
        border: 1px solid Red; 
        width: 300px; 
        height: 500px;
        display:table-cell;
        vertical-align:middle;
    }
    .content{
        border: 1px solid Blue; 
        width: 100px; 
        height:auto;
        min-height: 100px;
        max-height:200px;
        margin-left:auto;
        margin-right:auto;
        overflow:auto;
    }
</style>
<div class="container">
    <div class="content">
        add content here
    </div>
</div>

它看起来如何：

alt text

Test it.

Answer 2

如果您不需要IE支持，请使用vertical-align属性：

让身体显示为表格
将外部div作为表格单元格并将其垂直对齐设置为“中间”

喜欢：

<style type="text/css" media="screen">
  html{
    height: 100%;
  }
  body {
    width: 100%;
    height: 100%;
    display: table;
    margin: 0;
  }

  #div_1 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
  }

  #div_2 {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    margin: auto;
  }

</style>

<body>
  <div id="div_1">
    <div id="div_2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</body>

编辑：一个更加跨浏览器的实现，你可以让身体像这样：

<body>
  <table>
    <tr><td>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </td></tr>
  </table>
</body>

一旦显示：表格不能很好地与IE7和早期（看起来应该在ie8上工作，但我仍然无法做到）

将div定位在中心但具有动态高度？

2 个答案: