title: Vertically Center Child In Element With Other Children
body: <p>I have the following markup: </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="grandparent"&gt;
      &lt;span&gt;Hello World&lt;/span&gt;
      &lt;div class="parent"&gt;
        &lt;div class="child"&gt;
          &lt;i class="fa fa-star fa-5x"&gt;&lt;/i&gt;
          &lt;span&gt;Good For Yoouuu...&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.container {
    position: relative;
    height: 350px;
    /*This is unknown, set here for example purposes */
  }
  .grandparent {
    height: 100%;
    border: 1px solid black;
  }
  .parent {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .child span {
    display: block;
  }
  </code></pre>
  
  <p>That doesn't seem to take into account the <code>span</code> element outside of the <code>.parent</code> element.</p>
  
  <p>How can I vertically center the child <code>div</code> in the container, regardless of the competing <code>span</code> element,  without setting an explicit height?</p>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/15hgwu54/" rel="nofollow">https://jsfiddle.net/15hgwu54/</a></p>
  
  <p>Edit: I don't think this is a duplicate of the proposed question because that one doesn't take into account elements that compete for space inside the container. The solutions in the linked question would work if the only element were the <code>.parent</code> div, but since there is also a <code>span</code> taking up space, those answers don't properly center the <code>.parent</code> div.</p>