Question

假设我有一个带有文本的div，服务器应用了不同的文本高度。

<div id="info_box">
   Lorem ipsum
</div>

我想把它漂浮在窗户中间，并且它不应该长于窗口的大小，而是添加滚动条。

到目前为止，我可以通过添加样式

来获得这一点

position: fixed;
top: 15px;
bottom: 15px;
overflow: auto;

到div。

（ ~~http://jsfiddle.net/Ax82j/363/~~ http://jsfiddle.net/Ax82j/370/）

但我的问题是，如果文字比我的窗户高度短，我的div仍然是'全屏'。如果文字较短，则应按大小拟合（类似height: auto;，并定位到中心。

如何使用CSS？

修改：清理小提琴：http://jsfiddle.net/Ax82j/370/

Answer 1

不是最好的，但有一个解决方案就是：＆gt;＆gt; [点击此处1]

CSS

    html, body {
    padding: 0px;
    margin: 0px;
}

body {
    background: #D0CDC5 url("http://i.imgur.com/5KpR9.jpg") center top repeat;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-position-x: 50%;
    background-position-y: 0%;
    background-origin: initial;
    background-clip: initial;
    background-color: #D0CDC5;
    color: #333;
    height:100%;
}

html {
    height:100%;
}

#page_container {
    height:100%;
}

#page_wrapper {
}

#info_box {
    overflow: auto;
    width: 350px;
    padding-right: 10px;
    vertical-align: middle;
    margin: 15px 0px 15px 20px;
    position: absolute;
    left: 35px;
    top: 15px;
    right: 0px;
    bottom: 15px;
}

#info_box p {
    background-color: rgba(40,40,40,0.5);
    border: rgba(34,34,34,0.9) 1px solid;
    font-family: Helvetica;
    font-size: 40px;
    color: #76d4ff;
    top: 0px;
    padding: 0px;
    margin: 0px;
}

Answer 2

这是另一个解决方案。 #info-box使用左负边距和translateY（）变换居中。使用前者是因为明确设置了宽度（即350px）。必须使用后者，因为盒子的高度是动态的。较旧的浏览器不支持转换，您可能需要使用polyfill。

小提琴：http://jsfiddle.net/rxQ2V/。

修改：清理：http://jsfiddle.net/Ax82j/371/

#info_box {
    overflow: auto;
    width: 400px;
    margin-left:-200px; 
    position: absolute;
    max-height: 80%;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 3

更简单的方法，不使用webkits。您可以根据需要自定义背景颜色，宽度和高度，无论您设置的宽度和高度如何，它都会自动将其设置为中心。您可以删除高度或将其设置为自动，如果您希望它是窗口高度的最大值但不超过该高度。

#infobox {
background-color: rgba(255,255,255,0.7);
width:20em; 
height:20em;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:solid 1px #000000;
margin: auto;
overflow:auto;
}

如果您不想垂直居中，请将margin-top：0px添加到代码中，如下所示

#infobox {
background-color: rgba(255,255,255,0.7);
width:20em; 
height:20em;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:solid 1px #000000;
margin: auto;
margin-top:0px;
overflow:auto;
}

保持div居中但小于窗口

3 个答案: