bottom vertical align an h3 text with 100% height

Question

To be clear, I am not interested in vertical aligning the h3 to the bottom of a div, or another block element. I know that already.

I have an h3 with 100% height. I want to vertically align the text in the h3 to the bottom.

Here's a Fiddle.

div {
    border: 1px solid #ccc;
    height: 200px;
    text-align: center;
    width: 150px;
}
h3 {
    height: 100%;
    vertical-align: bottom;
}

<div>
    <h3>Kitchen Experiments</h3>
</div>

Answer 1

This might do the trick.

For the following HTML:

<div>
    <h3>Kitchen Experiments</h3>
</div>

apply the following CSS:

div {
    border: 1px solid #666;
    height: 200px;
    text-align: center;
    width: 150px;
}

h3 {
    height: inherit;
    vertical-align: bottom;
    background-color: pink; /* optional to show extent of element */
    margin: 0;
    display: table-cell;
}
h3:after { /* trick to add bottom padding */
    content: '';
    display: block;
    height: 10px; 
}

Apply display: table-cell to h3 and inherit the height (instead of 100%).

The parent div is still a block element, so it will probably behave responsively (but you need to try this yourself).

If you need to control the bottom padding between the text and the parent block, you can include the rule with the pseudo-element.

Demo: http://jsfiddle.net/audetwebdesign/RJ6YM/