JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lte IE 7]><div class="old-ie"><![endif]-->

<div class="wrap">
    <div class="wrap2">
        <a class="content" href="#">Here be the link</a>
    </div>
</div>
<div class="wrap">
    <div class="wrap2">
        <a class="content" href="#">Here be the longer link</a>
    </div>
</div>
<div class="wrap">
    <div class="wrap2">
        <a class="content" href="#">Here be the much longer link with lots and lots of additional text</a>
    </div>
</div>
<div class="wrap">
    <div class="wrap2">
        <a class="content" href="#">Here be the much much longer link with lots and lots and lots and lots and lots and lots and lots and lots of text</a>
    </div>
</div>

<!--[if lte IE 7]></div><![endif]-->

CSS

/* Essential layout for standard browsers */

.wrap {
    float: left;
    height: 100px; /* any fixed amount */
}

.wrap2 {
/* Don't need this element except for IE6/7, but if it is there, it must inherit the height so it can pass it down. */
    height: inherit;
/* Alternatively, can set a fixed height on .content, but this way means less duplicated settings. Also, it could be conditionally commented out in the HTML completely, but that would mean more markup. */
}

.content {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
}

/* Make it work in old Internet Explorer */
.old-ie .wrap{
    position: relative;
}
.old-ie .wrap2 {
    position: absolute;
    top: 50%;
}
.old-ie .content {
    position: relative;
    top: -50%;
    display: block;
}

/* Non-essential styling */
.wrap {
    border: 1px solid #cccccc;
    margin: 5px;
    width: 125px;
    padding: 15px;
}
.content {
    text-align: center;
    padding: 5px;
    border: 5px solid #eee;
    background: #ffffff;
}

/* Fix weird padding in IE by re-stating the width... */
.old-ie .wrap2 {
    width: 125px;
}