水平滚动div的垂直居中

Question

我可能在这里遗漏了一些非常简单的东西，但请多多包涵。

我想要的是一个 div，填充其父 div 宽度的 100%（仅此而已），在其父 div 中垂直居中，包含应该水平滚动而不是换行的内容。内部 div 和父 div 的高度都是可变的。

通过应用这个 CSS，我设法让内部 div 滚动其内容而不进行换行：

.content {
    white-space: nowrap;
    overflow: auto;
}

我尝试使用以下 CSS 在其父 div 中垂直居中：

.container {
    height: 500px; /* For testing purposes. */
    display: table-cell;
    vertical-align: middle;
}

但只要我这样做，内部 div 就会停止遵守overflow: auto 规则，它会扩展以填充其内容。在有和没有 display: table-cell 行的情况下自己尝试一下，看看会发生什么：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            .container {
                background-color: #DDD;
                height: 500px;
                display: table-cell;
                vertical-align: middle;
            }
            .content {
                background-color: #EEE;
                white-space: nowrap;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
            </div>
        </div>
    </body>
</html>

如何让 div 垂直居中而不使其扩展以填充其内容？

Answer 1

我想我已经为自己解决了。这适用于 Google Chrome - 我尚未在其他浏览器中对其进行测试。

诀窍是使用标准的table-cell 方法，将vertical-align 设置为middle。为了阻止表格扩展以填充其内容，我使用table-layout: fixed。它似乎有效。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            .wrapper {
                background-color: #CCC;
                display: table;
                table-layout: fixed;
                width: 100%;
                height: 500px; /* For example. */
            }
            .container {
                background-color: #DDD;
                display: table-cell;
                vertical-align: middle;
            }
            .content {
                background-color: #EEE;
                white-space: nowrap;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="container">
                <div class="content">
                    <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 2

您需要使用不同的垂直居中技术，因为制作 display:table-cell 使其显示为 table tr td 这意味着您观察到的行为是正确的，因为表格单元格会扩展以适应内容并且有没有溢出。 （哇，好长的一句话）

尝试使用绝对定位负边距技术：

#parent { position:relative; }
#content { position:absolute; top:50%; margin-top:-50%; }

css 没有经过测试，我不知道它是如何工作的，但这就是它的工作原理。