代码之家 › 专栏 › 技术社区 › robinjam

水平滚动div的垂直居中

css html

robinjam · 技术社区 · 15 年前

我可能漏掉了一些很简单的东西,但请容忍我。

我想要的是一个div,填充父div的100%宽度(不超过),垂直居中在父div中,包含应该水平滚动而不是包装的内容。内部div和父div都有可变的高度。

我通过对内部div应用此CSS成功地使其滚动内容而不进行包装:

.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垂直居中,而不使其展开以填充其内容?

2 回复 | 直到 15 年前

robinjam 15 年前

我想这是我自己想出来的。这在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>

Darko 15 年前

你需要使用不同的垂直定心技术,因为 display:table-cell 使其显示为 table tr td 这意味着您观察到的行为是正确的,因为表单元格会根据内容进行扩展,并且不会出现溢出。(哇,这句话很长)

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

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

css是没有经过测试的,而且是我头脑中最重要的东西,但这就是它的工作原理。