首页 文章

垂直和水平居中时出现滚动条，无法摆脱它

提问于
浏览 次
1

使用Bootstrap 3.0.3，我试图在水平和垂直方向上居中一个带有硬编码宽度和高度的div . JSFiddle有最新的代码，这里也报告了与SO的JSFiddle规则一致 .

http://jsfiddle.net/alex_kurilin/pNYg9/

HTML：

<div class="text-center full-height">
    <div class="inline full-height">
        <div class="fake-table full-height">
            <div class="fake-table-cell full-height">
                <div class="content fake-table">
                    <div class="fake-table-cell">foobar</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
}

.fake-table {
    display: table;
}
.fake-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.inline {
    display: inline-block;
}
.text-center {
    text-align: center;
}
.full-height {
    height: 100%;
}
.content {
    background-color: grey;
    width: 300px;
    height: 150px;
}

我在JSFiddle中显示的内容似乎是"work"，但由于某种原因 it adds a vertical scrollbar . 什么's interesting is that changing the body' s font-size ， font-family 和 line-height 似乎会影响滚动条，因此我想这与 height: 100% 和 inline-block div有关 .

我喜欢关于如何使这个特定布局正确发生的两个指针，因为我怀疑我这样做很难 .

html css twitter-bootstrap

1 回答

  • 1

    为什么不只是使用内容元素并删除其他元素：

    .content {
    background-color: grey;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -75px;
    width: 300px;
    height: 150px;
}
    回复于

相关问题