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?


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/


You can use the CSS3 Flexible boxes

Just add another CSS rule like this (I modified a little bit the other rules to give the divs fixed sizes so you can see the effect) :

.flexbox {
 display:flex;
 justify-content:center;
 align-items: center;
 flex-flow: column;
}

and add it to your HTML

<div class="col-md-6 logoCol flexbox">

Here's the fiddle http://jsfiddle.net/1td4Lg5k/

And this must be important to see Can I use flex?

Hope it helps


Alter the outer div with

style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"

Worked for my login box

<div class="mainbox col-md-3"... style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
  <div class="panel-heading">
    <div class="panel-title">Login</div>
  </div>
</div>
链接地址: http://www.djcxy.com/p/75970.html

上一篇: Bootstrap列缩放

下一篇: 如何垂直对齐Bootstrap 3列中的div