JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="block"></div>
</div>
CSS
html, body, .container {
margin: 0;
height: 100%;
}
.container {
text-align: center;
}
.container:before {
content: '';
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.block {
display: inline-block;
font: 48px/1.4 Arial, sans-serif;
color: #446EA7;
}
JavaScript
[
'<table><tr><td>Hello, world</td></tr><tr><td>Hello, krkm</td></tr></table>',
'Hello, world. Hello, krkm. Hello, world. Hello, krkm. Hello, world. Hello, krkm Hello, world. Hello, krkm',
'Hello, world<br/>Hello, krkm'
].forEach(function(v,i){
setTimeout(function(){
document.getElementsByClassName('block')[0].innerHTML = v;
},i*3000)
});