将一个div居中但高度动态的定位？

Question

将一个div居中但高度动态的定位？

htmlcss

6

我想将一个div定位在页面中央。我在网上找到的解决方案假设div是固定大小的。如果内容大小合适，我需要div在中央，但如果超过div的大小，则应该变大，并最终允许滚动而不改变宽度。

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

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

如下图所示： https://istack.dev59.com/Uovts.webp https://istack.dev59.com/ttAyi.webp

- Kristina Brooks

可能是重复的问题：如何将 div 水平垂直居中？ - Stephen

以上问题的被接受答案应该会帮助你解决问题。 - Stephen

@Stephen 我认为这并不是重复的。 - Alin Purcaru

@alin 不完全是，但这个解决方案可以起作用。 - Stephen

2个回答

0

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

将body显示为表格
将外部div设置为table-cell，并将其vertical-align设置为“middle”

例如：

<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：

<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>

一旦使用display: table在IE7及更早版本中无法正常工作（似乎应该在ie8上工作，但我仍然无法做到）

- Henry Mazza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alin Purcaru · Accepted Answer

请看以下内容：

<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文本

测试一下。