Twitter Bootstrap 3: How to center a block - twitter-bootstrap-3

Question

It seems to me that the class center-block is missing from the bootstrap 3 style sheets. Am I missing something?
Its usage is described here, http://getbootstrap.com/css/#helper-classes-center

Answer 1

It's new in the Bootstrap 3.0.1 release, so make sure you have the latest (10/29)...
Demo: http://bootply.com/91632
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>

Answer 2

It works far better this way (preserving responsiveness):
<!-- somewhere deep start -->
<div class="row">
<div class="center-block col-md-4" style="float: none; background-color: grey">
Hi there!
</div>
</div>
<!-- somewhere deep end -->
http://www.bootply.com/0L5rBI2taZ

Answer 3

You have to use style="width:value" with center block class

Answer 4

center-block can be found in bootstrap 3.0 in utilities.less on line 12
and mixins.less on line 39

Answer 5

You can use class .center-block in combination with style="width:400px;max-width:100%;" to preserve responsiveness.
Using .col-md-* class with .center-block will not work because of the float on .col-md-*.

Answer 6

center-block is bad idea as it covers a portion on your screen and you cannot click on your fields or buttons.
col-md-offset-? is better option.
Use col-md-offset-3 is better option if class is col-sm-6. Just change the number to center your block.

Answer 7

A few answers here seem incomplete. Here are several variations:
<style>
.box {
height: 200px;
width: 200px;
border: 4px solid gray;
}
</style>
<!-- This works: .container>.row>.center-block.box -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
<!-- This does not work -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
</div>
</div>
<!-- This is the hybrid solution from other answers:
.container>.row>.col-xs-6>.center-block.box
-->
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
</div>
To make it work with col-* classes, you need to wrap the .center-block inside a .col-* class, but remember to either add another class that sets the width (.box in this case), or to alter the .center-block itself by giving it a width.
Check it out on bootply.