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;
}

```
My favorite for modal centering is to use a combination of `position` and `translate`, as described here: <http://css-tricks.com/centering-percentage-widthheight-elements/>

In summary:

```
.center {
    width: 50%; /* or whatever you want your width to be; defaults to 100% */
    height: 50%; /* or whatever you want your height to be; defaults to wrapping content */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

```

This may or may not work according to your use case, but it's a good trick to have in your toolbox.