Vertical Align Middle Content With Bootstrap 3

I want to set vertical middle content in div block with latest bootstrap v3.2.0. I have Read the answer to vertical-align with bootstrap 3, but it uses float:none; in div block. H

Solution 1:

I found the best way to achieve that is to create a table layout within the container:

Check out this fiddle: http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

The media query makes sure the content will only be a table in large displays, otherwise it will stack as it used to.

Solution 2:

This worked for me:

.container > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

bootply example

Solution 3:

.container {
  position: relative;
  height: 14rem;
  border: 1px solid;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  border: 1px dashed deeppink;
}

<div class="container theme-showcase" role="main">
  <div class="jumbotron">
    I want to center this div with Bootstrap.
  </div>
</div>

Get from [Solved] Vertically center with Bootstrap

Solution 4:

I think this is the solution with bootstrap 3: http://jsfiddle.net/raffi/52VtD/7348/

.col-lg-4 {
    display: table-cell;
    vertical-align: middle;
    float: none;
}