Twitter Bootstrap Question posted in

Twitter bootstrap – 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?

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search