JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed-div-height">
    <span>One line text </span>
</div>
<br /> <hr /> <br />

<div class="unknown-div-height">
    <span class="unknown-div-margin">One line text </span>
</div>

<br /> <hr /> <br />
<div class="for-ie8-and-above">
    <div>One line text</div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
div {
    border:1px solid red;
}
div.fixed-div-height {
    height:200px;
    width:200px;
    text-align:center;
}
div.fixed-div-height span {
    line-height:200px;    /* equal to height of the fixed div*/
}

div.unknown-div-height {
    height:100%;
    text-align:center;
    position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
    display:inline-block;
    height:20px;
    position: absolute;
    top: 50%;
    left:0;
    right:0;
}
div.for-ie8-and-above {
    width:100%;
    display:table;
    height:400px;
    text-align:center;
}
div.for-ie8-and-above > div {
    height:400px;
    width:100%;
    display:table-cell;
    vertical-align:middle;
    /* key here */
}