JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center Vert and Horiz</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="header">
    header
</div>
<div id="outer">
    <div id="content">
        <div class="inner">
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
            content<br/>
        </div>
    </div>
</div>
<div id="footer">
    footer
</div>
</body>
</html>

CSS

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;text-decoration:none}:focus{outline:0}a:active{outline:none}body{line-height:1;color:black;background:white}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
}

#outer {
    width: 100%;
    background: #fff;
    margin: -128px auto 0;/* header plus footer height */
    height: 100%;
    text-align: left;
    clear: both;
    display: table;
    position: relative;
    z-index: 1;
}
#header {
    width: 100%;
    margin: auto;
    background: black;
    height: 66px;
    position: relative;
    z-index: 2;
    border-bottom: 20px solid #fff;
}
#footer {
    background: black;
    width: 100%;
    margin: auto;
    height: 22px;
    clear: both;
    border-top: 20px solid #fff;
    position: relative;
    z-index: 2;
}
#content {
    vertical-align: middle;
    display: table-cell;
    padding: 128px 0 0;
}
#content .inner {
    background: blue;
    padding: 0 10px;
    width: 300px;
    height: 200px;
    margin: 0 auto;
}

/* rules for ie6 */
* html #outer {
    height: 100%;
}
* html #content {
    top: 50%;
    position: relative;
    width: 100%;
    float: left;
}
* html .inner {
    top: -50%;
    position: relative;
}

/* rules for ie7 */
*+html #outer {
    height: auto;
    min-height: 100%;
}
*+html #content {
    top: 50%;
   ...