JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="table-cell show_border">tabel cell method </div>
    <div class="table-cell show_border">This is the easiest of all to center text vertically as well as get divs in on line</div>
    <div class="table-cell show_border">supported IE8 and above</div>
</div>
<br />
<br />
<div class="inline">
    <div class="inline-div show_border one-line">inline-one line</div>
    <div class="inline-div show_border">div</div>
    <div class="inline-div show_border">method</div>
</div>
<br />
<br />
<div class="float-class">
    <div class="floatdiv show_border">floating</div>
    <div class="floatdiv show_border">div</div>
    <div class="floatdiv show_border">method</div>
   
    <!-- very important -->
</div>
 <div class="clearfloat"></div>

CSS

html, body {
    width:100%;
    margin:0;
    height:100%;
    padding:0;
}
div.show_border {
    height:100px;
    width:100px;
    border:1px solid red;
}
/************Supported by IE8 and above *******************/
 div.table {
    width:100%;
    /* important */
    display:table;
    text-align:center;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}
/************ Method 2 *******************/
 div.inline {
    width:100%;
    display:inline-block;
    text-align:center;
}
div.inline-div {
    width:32%;
    display:inline-block;
}
/************ Method 3 *******************/
 .float-class {
    width:100%;
    text-align:center;
}
div.floatdiv {
    float:left;
    width:32%;
    border:1px solid black;
}

.clearfloat {
    clear:both;
}