使用滾動條在水平和垂直方向上居中顯示內容？

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的帖子也很好用，您可能想將兩種方法結合起來以得到您想要的東西