JSFiddle - React, Tailwind, and code Playground

HTML

<body class="centerFlex">
    <div id="firstObject" class="">some text
        <div class="centerFlex">some different text</div>
    </div>
    <div id="secondObject" class="centerPseudo">
        <div class="centerPseudo"></div>
    </div>
</body>

CSS

.centerFlex {
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}
.centerPseudo {
    display:inline-block;
    text-align:center;
}
.centerPseudo::before {
    content:'';
    display:inline-block;
    height: 100%;
    vertical-align:middle;
    width:0px;
}
#firstObject {
    width:300px;
    height:100px;
    background-color:red;
}
#secondObject {
    width:300px;
    height:100px;
    background-color:yellow;
}
a {
    margin-right:15px;
}
div {
    min-width:20px;
    height:45px;
    background-color:green;
}
body {
    height:600px;
    margin:0;
    display:block;
}