Absolute position of a div inside a div without absolute position
<p>I made a fiddle of my problem to easily see it:</p>

<p><a href="https://jsfiddle.net/6jzb09nd/" rel="nofollow">https://jsfiddle.net/6jzb09nd/</a></p>

<p>I have a series of nested divs.  And the very bottom of the nest i want a div absolutely positioned so I can center it inside it's parent div.</p>

<p>It works find when it's the only thing on the page but when I start adding other elements the positioning gets all messed up.</p>

<p>In the fiddle if you uncomment the "//float:left", you can see the positioning break.</p>

<p>Here's the code:</p>

<pre><code>.col-sm-2,
.col-sm-10 {
  //float:left;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {

  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

&lt;div class="col-sm-2"&gt; Blah
&lt;/div&gt;
&lt;div class="col-sm-10"&gt;
  &lt;div class="preview"&gt;
    &lt;div class="databubble"&gt;
      &lt;div class="leftnumouter"&gt;
        &lt;div class="leftnuminner"&gt;5
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="lefttextouter"&gt;
        &lt;div class="lefttextinner"&gt;Sales
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="databubble"&gt;
      &lt;div class="rightnumouter"&gt;
        &lt;div class="rightnuminner"&gt;3
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="righttextouter"&gt;
        &lt;div class="righttextinner"&gt;Orders
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre>