Overlays a layer that fills the dimensions of its container, including the container's padding. Takes the additional classes:
div.screen.layer
div.layer {content}
div.centering.layer div {content}
A limitation of this construct is that contents will overflow the layer whatever you set overflow to, because display: table; disregards the overflow style.
To get round this problem we need to wrap the .centering.layer in another layer:
div.layer div.centering.layer div {content}
The question is: how the hell do we hide the srollbars and still allow scrolling?
div.hide-scroll.layer div.push-scroll.layer div.show-scroll.layer div.centering.layer div {content}
It turns out to be harder than we thought. It involves a lot of nested layers. The trick is to make some layers ignore their container's padding and others to respect it. We can do this with:
top: 0; right: 0; bottom: 0; left: 0;
to ignore padding, and
width: 100%; height: 100%;
to respect padding. Note that defining width/height will override top/right/bottom/left declarations, and display: table; will collapse anything that does not have width/height defined, making the whole thing a bit of a mindbender. See comments in html for details of what each nested div does.