Vertical align text in block element

Issue

I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

Is there really no CSS property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.

Solution

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

All you need to do is:

display: flex;
align-items: center;

See this fiddle.

Answered By - melhosseiny