JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<h1>OMG, I’m centered</h1>

CSS

html {
    height: 100%;
}
body {
    display: -webkit-box;
    /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;
    /* OLD: Firefox (buggy) */
    display: -ms-flexbox;
    /* MID: IE 10 */
    display: -webkit-flex;
    /* NEW, Chrome 21+ */
    display: flex;
    /* NEW: Opera 12.1, Firefox 22+ */
    -webkit-box-align: center;
    -moz-box-align: center;
    /* OLD… */
    -ms-flex-align: center;
    /* You know the drill now… */
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    width: 100%
    /* needed for Firefox */
}
h1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 10rem;
}