CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alexandr Kurilin
Alexandr Kurilin

Reputation: 7855

Scrollbar appears when centering vertically and horizontally, can't get rid of it

Using Bootstrap 3.0.3, I'm attempting to center both horizontally and vertically a div with a hard-coded width and height. The JSFiddle has the latest code in it, also reported here to be consistent with SO's rules regarding JSFiddle.

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

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

The 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;
}

What I'm showing in the JSFiddle appears to "work", however for some reason it adds a vertical scrollbar. What's interesting is that changing the body's font-size, font-family and line-height appears to affect the scrollbar, and thus I imagine this has something to do with the height: 100% and the inline-block div.

I'd love a pointer on two on how to make this specific layout happen correctly, as I suspect I'm doing this the hard way.

Upvotes: 1

Views: 94

Answers (1)

Hardy
Hardy

Reputation: 5641

why not just use content element and remove others:

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

Upvotes: 1

Related Questions