0

此代码将 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。

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

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

:-)

4

2 回答 2

0

不要使用自动边距来使您的 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/

像这样，您可以按照@EricFrick 的建议设置 min-height CSS 属性。

更新

事实上，内容并没有使容器按需增长，只是在某种程度上。在尝试了这个之后，我发现没有办法让它按照你想要的方式。min-height 只改变初始高度，但是当它溢出时，div 停止增长。这似乎是绝对定位元素的常见行为。

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

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

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

于 2013-07-22T20:43:29.007 回答
0

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

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

 #divMessage { 
     min-height:100px;
     height:auto !important;
     height:100px; //this should be the same as min-height.
}
于 2013-07-22T20:07:08.710 回答