Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment

How to vertically align div inside Bootstrap 3 column

I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the center of the column.

<body>
    <div class="container-fluid cont">
        <div class="row logoRow">
            <div class="col-md-6 logoCol">
                <div class="logoCont center-block"></div>
            </div>
        </div>
    </div>
</body>

And the style is:

html, body {
    height: 100%;
}

.cont {
    height: 100%;
    background: blue;
}
.logoRow {
    height: 50%;
    background: green;
}
.logoCol {
    height: 100%;
    background: yellow;
}

.logoCont {
    height: 50%;
    width: 50%;
    background: red;
}

Here is my fiddle of this: http://jsfiddle.net/p9ou30g7/2/

Adding a center-block class to inner div aligned it to horizontal center, but I also need to align it vertically to the center of the column. So that red div is in the center of the yellow one. How can this be done?

Solution

  • This is one way to do it, and is more crossbrowser supported than flexbox.

    http://jsfiddle.net/p9ou30g7/3/

    .logoCont {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    height: 50%;
    width: 50%;
    background: red;
}

    There are other ways that you can check out here: https://css-tricks.com/centering-css-complete-guide/