fixes #10164: Document .center-block mixin and update CSS to include it as a class as well

_includes/nav-css.html

@@ -79,6 +79,7 @@
   <ul class="nav">
     <li><a href="#helper-classes-close">Close icon</a></li>
     <li><a href="#helper-classes-floats">Quick floats</a></li>
+    <li><a href="#helper-classes-center">Center content blocks</a></li>
     <li><a href="#helper-classes-clearfix">Clearfix</a></li>
     <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
     <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>

css.html

@@ -2254,6 +2254,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
 
+    <h3 id="helper-classes-center">Center content blocks</h3>
+    <p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p>
+{% highlight html %}
+<div class="center-block">...</div>
+{% endhighlight %}
+{% highlight css %}
+// Classes
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Usage as mixins
+.element {
+  .center-block();
+}
+{% endhighlight %}
+
+
+
     <h3 id="helper-classes-clearfix">Clearfix</h3>
     <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}

dist/css/bootstrap.css

@@ -6252,6 +6252,12 @@ body.modal-open,
   clear: both;
 }
 
+.center-block {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .pull-right {
   float: right !important;
 }

less/utilities.less

@@ -9,6 +9,9 @@
 .clearfix {
   .clearfix();
 }
+.center-block {
+  .center-block();
+}
 .pull-right {
   float: right !important;
 }