Vertically Centering Multi-Line text in CSS

There are many, many blog posts on this subject already, but I've struggled to get many of the methods to work so I'm saving this for posterity.

<div class="label">
    <div class="label-inner">
        foobar<br>baz
    </div>
</div>

.label {
    display: table;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.label-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Result