Question: What are the best methods to `vertically-align` something relative to it's elements dimensions. As of right now, I'm only aware of `vertical-align:middle;` working well inside of a `<tr>`. 

Are there any other methodologies that I'm overlooking that can work to procedurally accomplish this goal?

Answer: 
Here are 3 very good techniques for vertically centering a child within a container - even when you don't know the height of the child element. The first 2 come from [this CSS-tricks article](http://css-tricks.com/centering-in-the-unknown/) 

**Markup (for all methods):**

```
<div class="block">    
    <div class="centered">
        Some text
    </div>    
</div>

```

Solution #1: CSS tables method (**[FIDDLE](http://jsfiddle.net/danield770/n2Zg2/7/)**)
--------------------------------------------------------------------------------------

CSS:

```
/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}

.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}

```

Solution #2: Pseudo ('Ghost') element method (**[FIDDLE](http://jsfiddle.net/danield770/n2Zg2/6/)**)
----------------------------------------------------------------------------------------------------

**CSS:**

```
/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

```

Solution #3: Flexbox (**[FIDDLE](http://jsfiddle.net/danield770/n2Zg2/11/)**)
-----------------------------------------------------------------------------

**(Relevant) CSS:**

```
.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}

```
A great place for you to start is this [article](http://css-tricks.com/what-is-vertical-align/) by CSS Tricks. It goes over every value that `vertical-align` can have and the different uses of each in a clear concise way. 

Here are the options:

```
vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom

```

And here are the valid options for table cells:

```
baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top
Align the top padding edge of the cell with the top of the row.
middle
Center the padding box of the cell within the row.
bottom
Align the bottom padding edge of the cell with the bottom of the row.

```

Additionally, you may want to try some other tricks like setting the `line-height` equal to the parent container's height.