如何保持内容垂直居中并使用滚动条显示任何垂直溢出？答案

【问题标题】：How to keep content centered vertically and display any vertical overflow with a scrollbar?如何保持内容垂直居中并使用滚动条显示任何垂直溢出？
【发布时间】：2013-06-07 05:07:46
【问题描述】：

我有一个内容区域，它的行为方式如下：

如果没有垂直溢出，则内容垂直居中（目前通过display:table/-cell 实现）
除非垂直溢出，否则不会显示滚动条
包含 div 的高度永远不会改变

我只能满足第一点 - fiddle:

http://jsfiddle.net/PTSkR/119/

这是我的 html：

<div class="row-fluid card-box">

    <div class="span4 side-study-box">
        <div class="side-box-content">
            <pre class="text-content-saved">TEST 
           TEST</pre>
            </div>
        </div>
</div>

CSS：

.side-study-box {
    background-color: white;
    color: black;
    border: 1px solid #3D6AA2;
    text-align: center;
    height: 160px !important;
    max-height: 160px !important;
    display: table !important;
    margin: 0px !important;
    margin-left: -1px !important;
    position: relative;
    overflow-y: scroll !important;
}

    .side-study-box .side-box-content {
        width: calc(100%);
        height: 160px !important;
        float: right;
        display: table;
        overflow-y: scroll !important;
        background-color: white;
    }

    /*#region CONTENT AREAS */

    /*#region TEXT CONTENT */
    .side-study-box .text-content-saved {
        width: calc(100%+29px) !important;
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 160px !important;
        max-height: 160px !important;
        background-color: white;
        padding: 0px !important;
        margin: 0px !important;
        border: 0px !important;
        overflow-y: scroll !important;
    }

【问题讨论】：

标签： css

【解决方案1】：

这可以使用一些基本的 CSS 和一点 jQuery 来完成。

看看我的小提琴。随意填充内容以使其更大，看看 ti 的反应。

http://jsfiddle.net/PTSkR/122/

HTML

<div id="holder">
    <div id="text">
        test<br/>
        test<br/>
        test<br/>
        test
    </div>    
</div>

CSS

#holder{
    height:200px; 
    width:100px;
    overflow:auto;
    border:1px dotted #999;
    position:relative;
}
#text{
    position:absolute;
    top:0;
}

JQuery

var holder = $('#holder');
var text = $('#text');

if (text.height()<holder.height()){
    var y=(holder.height()/2) - (text.height()/2);
    text.css({top:y+'px'});
}

【讨论】：