How to vertically align div inside Bootstrap 3 column

34.5k Views Asked by mofoyoda At 03 April 2025 at 18:30

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?

Original Q&A

There are 3 best solutions below

Muhammad Umer On 21 June 2015 at 16:16 BEST ANSWER

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/

Eric Martinez On 21 June 2015 at 16:14

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

Dennis Jensen On 15 December 2016 at 08:21

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>

How to vertically align div inside Bootstrap 3 column

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in TWITTER-BOOTSTRAP-3

Related Questions in VERTICAL-ALIGNMENT

Trending Questions

Popular # Hahtags

Popular Questions