javascript - 使用滚动条水平和垂直居中内容？

Question

我有一个宽度为:400px 高度为:300px 的 div 我将在 div 中插入一些应水平和垂直对齐的文本。

如果 div 中的文本比 div 大，它应该显示滚动条。这是一张显示我的意思的图片:

Answer 1

以下适用于 webkit & geko & IE8 以上版本。如果您需要旧版 IE 兼容性，请尝试使用这些垂直居中技术中的一些:http://blog.themeforest.net/tutorials/vertical-centering-with-css/或者 Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

<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>