bootstrap 3 center div in CELL

Question

I'm using Bootstrap 3 and I want to center a div within a cell in the container row. when I looked I only found topics about centering the div in the container which is not what I need. I want to know how to center the div (both vertically and horizontally) in the particular cell that it is. The reason is that on the same row I have other divs of bigger height and at the end of the row I want to put a button which is relatively small compared to the other divs and hence I want to center it to make it look pretty.

What I've tried until now is to go into the bootstrap.min.css file and change the following:

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd}

to:

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:middle;
border-top:1px solid #ddd}

Which didn't seem to change anything so I'm guessing I'm not on the right track.

Answer 1

For center-ing a div horizontally, you can put in CSS file:

margin-left: auto; margin-right:auto;

For vertical alignment:

margin-top: auto; margin-bottom: auto;

Posting your HTML code would be helpful btw.

Answer 2

For both vertical and horizontal centering, this solution worked for me: http://jsfiddle.net/hg8Sn/

The only downside of this is that as I am using bootstrap, when the window gets smaller the button would be aligned to the left of the div. I fixed this by making the button take up the whole width of the div so I set col-xs and col-md to 12:

 <div id="addchart" class="col-md-6 col-lg-6 col-xs-12 col-sm-12 text-center">
     <button id="add-chart-btn" class="btn btn-lg btn-default">Add Chart</button>
 </div>

For me, this only centers the button and it doesn't stretch it to the width of the container. It could be because I am using a specific bootstrap theme but either way if someone would want to fix this then they can set a fixed width to the button.

Answer 3

Check and see you are using bootstrap.min.css and not bootstrap.css. Maybe you might be linking the wrong css files.