JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<body>

	<div id="container">
		<canvas></canvas>
	</div>

</body>

CSS

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container{
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

canvas{
    width:400px;
    height:300px;
    
    display:inline-block;
    vertical-align:middle;
    
    background:#fff;
}

JavaScript

/* center canvas in container */