使用滚动条在水平和垂直方向上居中显示内容？

Question

我有一个div，其宽度为：400px，高度为：300px， 在div内，我将插入一些应水平对齐和垂直对齐的Text。

如果div内的文本大于div，则应显示滚动条。 这是一张图片，显示了我的意思：

Answer 1

以下适用于webkit＆geko＆IE8及更高版本。 如果您需要旧版IE兼容性，请尝试以下一些方法进行垂直居中： http : //blog.themeforest.net/tutorials/vertical-centering-with-css/或在Div内垂直和水平居中图像（如果不需要）知道图片的大小吗？

<div style="height:300px; overflow-y:auto; border:solid 1px #CCC;  width:400px;">
    <div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
        test
    </div>
</div>

Answer 2

您可能要在div上用作容器，然后将文本放在另一个div中，您可能还想签出jscrollpane

div.container {
overflow: auto;
text-align: center;
}



<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>

另外，请尝试为容器设置固定高度，以便获得滚动条

    div.container {
max-height: 200px
}

cronoklee的帖子也很好用，您可能想将两种方法结合起来以得到您想要的东西