Question

此代码将div放在页面中间

#divMessage {
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: lightblue;
    width: 400px;
    height: 400px;
    text-align: center;
    font-size: 3em;
    margin: auto;
    padding: 10px;
}

但如果文本太长而没有div扩展且没有背景增加，则文本会覆盖div。

溢出：auto会启用滚动条但这对我来说也不是一个可接受的解决方案，如何让div保持居中但是让它增长？

更新如果我使用min-height：100px，div会从屏幕的顶部到底部，因为我的顶部0和底部0用于将div放在屏幕中间，这也不是一个可接受的解决方案我

： - ）

Answer 1

删除高度属性，将其修复，然后将其更改为最小高度。这样，如果没有文本，div将保持你想要的大小，并且它将根据需要增长。

调整以在所有浏览器中工作：

 #divMessage { 
     min-height:100px;
     height:auto !important;
     height:100px; //this should be the same as min-height.
}

Answer 2

尝试使用左侧和顶部位置以及左侧/顶部边距，而不是使用自动边距来居中div。诀窍是将其从顶部放置50％，从左边放置50％，并给出负左边距等于div宽度的一半。上限也是如此。

示例：

#divMessage {
    z-index: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    background-color: lightblue;
    width: 400px;
    min-height: 400px;
    text-align: center;
    font-size: 3em;
    margin-left: -200px;
    margin-top: -200px;
    padding: 10px;
}

看看这个小提琴：http://jsfiddle.net/VtAcB/

像这样你可以设置min-height CSS属性，如@EricFrick所建议。

<强>更新

事实上，内容并没有使容器按需增长，只是在某种程度上。经过尝试，我发现没有办法按照你想要的方式制作它。最小高度仅改变初始高度，但当它溢出时，div停止增长。这似乎是绝对定位元素的共同行为。

解决方法：继续设置min-height，就像上一个示例一样，更改值并设置overflow-y：scroll或overflow：auto;到#divMessage。但是请记住在更改框最小高度时调整上边距，否则您将不再有垂直居中的区块。

更新版本：http://jsfiddle.net/VtAcB/1/

关于您指出的定位问题，请注意，在小提琴中，示例正确居中，代码中有一些东西阻止div居中。我打赌在你的项目中有一些与div相关的内容。请记住，具有position：absolute的元素相对于其最近定位的祖先或包含块获取其位置。使用chrome dev工具或firebug检查容器div宽度和高度，以查看其尺寸。

自动增长取决于内容和页面中间的中心（中心）绝对div

2 个答案: