How Do I Horizontally Center a Table in Bootstrap

Using this Bootstrap row/column combination works regardless of the size of your table or screen, no CSS necessary:

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>

To horizontally center the table itself, you can use in a CSS, both the margin and width properties.

.table {
   margin: auto;
   width: 50% !important; 
}

Now, for the content of the table, you can use both a combination of CSS and the Bootstrap typography classes. In this case, CSS for the th elements, and the .text-center class in your table.

table th {
   text-align: center; 
}

<table class="table table-bordered table-striped text-center">
    <!-- Content of the table -->
</table>

Here your can see it for both .container-fluid and .container classes:

table th {
   text-align: center; 
}

.table {
   margin: auto;
   width: 50% !important; 
}

<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>

<!-- container-fluid -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>
  
<!-- container -->
<div id="pricing" class="container">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>

<div class="table-responsive">
    <table class="mx-auto w-auto">
      ....
    </table>
</div>

Take solution from Center bootstrap table with 100% width
Comment from @Rene Hamburger: as in the linked answer, w-auto is required for the table to keep its original, natural width. Otherwise it's resized to 100%.

Just add a class: text-center in table class.

<table class="table text-center"> 
... 
</table>

It's a native class from Bootstrap that permits horizontal align.

You can center the table as follows with CSS.

.table {
    width: 50%;
    margin: 0 auto !important;
}

You need to have margin: auto

You can try column classes make it center

<div class="row col-md-4 col-md-push-4"><!-- you can use column classes md-3,md-5 as per your table width -->
<table class="yourtableclasses">
<!-- table content -->
</table>
</div>

With css

.table td {
   text-align: center;   
}

Or bootstrap:

<table class="table text-center">