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

【问题标题】：Positioning a div in the centre but with dynamic height?将 div 定位在中心但具有动态高度？
【发布时间】：2025-11-22 23:35:01
【问题描述】：

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

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

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

【问题讨论】：

[位置 div 中心水平和垂直](*.com/questions/2726219/…)的可能重复
上述问题的接受答案应该可以帮助您。
@Stephen 我不认为这是重复的。
@alin 不，不完全是，但解决方案会奏效。

标签： html css

【解决方案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>

它的样子：

Test it.

【讨论】：

+1，显示的有趣使用。这在所有浏览器中都有效吗？
@Stephen 没有。只有 IE8 和现代浏览器。
该解决方案似乎没有保留换行符。
并且整个页面必须是可滚动的。随着我们添加内容，DIV 必须扩展。

【解决方案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>

once display: table 在 IE7 和早期版本中不能很好地工作（看起来应该在 ie8 上工作，但我仍然无法做到）

【讨论】：