No JavaScript

Posted at

<!doctype html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css" media="all">
html{
background: none lightblue;
}

html,body,[container]{ padding:0; margin:0; }

[container]{
width: calc(80vmax);
height: calc(50vmin);
left: calc(50% - (80vmax / 2));
top: calc(50% - (50vmin / 2));
position: absolute;
background: none gray;
}
</style>
</head>
<body><div container></div>
</body>
</html>


demo (it is an IFRAME, you can click it to open in new tab, and inspect the code ;] )







this one is a bit of a hack, and relay on margin-CSS attribute as a self-calculating way,
simpler, and more compatible when vmin and vmax are not usable,
but it relays on implementation by the browser that might be changing some time from now..

<!doctype html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css" media="all">
html{
background: none lightblue;
}
</style>
</head>
<body>
<div style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: yellow;">hello :)
</div>
</body>
</html>


demo:




although the methods above works quite well,
you might want to use the following X/Y centering using transform,
combined with position absolute and left/top at 50%, this method is used by the Google-map team at our offices,
and although not required (in my opinion a bit ugly too) it is surly "worth knowing"..

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="ltr" lang="en-US" language="English" charset="UTF-8" encoding="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="fragment" content="!"/>
<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
<style type="text/css" media="all">
/*<![CDATA[*/
@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";
html,body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
text-size-adjust: 100%;
font: 60pt monospace;
}
body{
white-space: initial;
word-break: break-all;
}
body{
background: none lightblue;
}
[center]{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
/*]]>*/
</style>
</head>
<body><div center>hi</div></body>
</html>


', 'HTML5 Ninja - Centring Container In The Middle Of ViewPort With CSS3 Only