仅使用CSS保持内容垂直居中？

我有一个内容区域，其行为应如下所示：

• 如果没有垂直溢出，内容将垂直居中（当前通过

  显示：table/-cell

  ）
• 除非存在垂直溢出，否则不会显示滚动条
• 包含div的高度永远不会更改

我只能满足第一点-小提琴：

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

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

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

    /*#region CONTENT AREAS */

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

这是我的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>

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

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

    /*#region CONTENT AREAS */

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

---

不幸的是，我不能使用js作为解决方案的一部分。。。只有css才能做到这一点吗？

您可以使用

溢出：自动以达到第二点，并设置以下各项：

断字：正常！重要的；
换行：正常！重要的；
空白：pre！重要的

小提琴：

请记住，由于您使用的是
pre
标记，这意味着所有空格和换行符格式都会计算在内，因此任何空格或多余的行都可能导致溢出，您可能会错过这一点。请参阅所有
的功能！重要信息
s？这些真的有必要吗？（
！important
通常被视为在非常非常必要的时候的最后手段。）@icktoofay这是我在与bootstrap作斗争。我会在一切正常后清理它。在我看来，问题示例在减少不必要的代码方面需要一些改进。这不符合要求-滚动条总是显示，如果有很多内容，高度会改变。你想要什么？你说高度永远不会改变，所以如果它们大于160px，我就让它随内容改变。滚动条不会显示高度是否为160或更低。它永远不会改变。我列出了需求，而不是问题，因此“应该按照以下方式进行操作：”请参见上面的编辑。希望能有帮助。我更新了小提琴。小心你放在pre里的东西，因为它会误导你。我需要使用预标签，因为换行符需要计数-谢谢你的提醒。chrome中的滚动条似乎有点古怪，有任何溢出：看看滚动条如何扩展到160px以上？