title: CSS: Bottom-Centering a bootstrap pagination element
body: <p>Ok so I have an angular app that uses embedded views. Not sure if it matters but I replaced all of the embeds with what it would actually look like if it were a normal html file. Anyways I am trying to horizontally center a fixed uib-pagination element at the bottom of my page. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;base href="/"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  
  &lt;!-- Imports for my personal stylesheet as well as ui-bootstrap's and angular material's stylesheets go here--&gt;
  
  &lt;/head&gt;
  &lt;body  style="width:100vw; height:auto"&gt;
  &lt;div ng-app="app" layout-fill ng-cloak&gt;
    &lt;div class="root-container" layout-fill style="width:100vw; height:auto padding:0; position: absolute;"&gt;
      &lt;md-content layout="column" layout-fill style="width:100vw; height:auto"&gt;
      &lt;md-toolbar style="width:100vw; height:auto"&gt;
        &lt;div class="md-toolbar-tools"&gt;
          &lt;md-button aria-label="Go Back"&gt; Go Back &lt;/md-button&gt;
          &lt;md-button class="md-raised" aria-label="Learn More"&gt; Learn More &lt;/md-button&gt;
        &lt;/div&gt;
      &lt;/md-toolbar&gt;
      &lt;md-tabs md-selected="vm.selectedIndex" md-border-bottom&gt;
        &lt;md-tab label="Home"&gt; &lt;/md-tab&gt;
        &lt;md-tab label="Submit"&gt; &lt;/md-tab&gt;
        &lt;md-tab label="Contact"&gt; &lt;/md-tab&gt;
      &lt;/md-tabs&gt;
      &lt;md-content class="main-body-content"&gt;
        &lt;ul uib-pagination total-items="vm.itemCount" items-per-page="vm.itemsPerPage" ng-model="vm.currentPage" ng-change="log()" max-size="vm.maxShownPagination" class="pagination-lg" boundary-links="true" force-ellipses="true"&gt;
        &lt;/ul&gt;
      &lt;/md-content&gt;
    &lt;/div&gt;
    &lt;/md-content&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!---- scripts go here ----&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my stylesheet with main-body-content's background colored red for contrast and view-ability:</p>
  
  <pre><code>.main-body-content {
      height: 100vh;
      width: 100vw;
      background: red;
  }
  
  .pagination-lg {
      position: fixed; 
      bottom: 0px;
      width: 100vw;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>Below is a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/3LLUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3LLUl.png" alt="Main Content"></a></p>
  
  <p>As you can see the pagination element is near the bottom of the page and it does scroll along with the viewport however it is not horizontally centered. Help? New to CSS.</p>