In cases when the screen is big enough to display my webpage without any scroll bar, I want the webpage content to be rendered from the bottom of the screen upwards. This means that the browsers white space for the additional screen space not covered by content appears on top of the webpage content, instead of on bottom.
That’s achieved by styling the body as follows (example):
<body style="position:absolute; bottom:0; width:980px;">
Given that the page’s width ought to be 980px, how do I center the webpage?
Usually this is achieved with:
<body style="position:RELATIVE; width:980px; margin-left:auto; margin-right:auto;">
How can I achieve both bottom-position and centered page?
I don’t want to set explicit values for the left and right margins. I wish the page to be centered relative to the screen (as in ‘auto’).
Set
leftto 50% and add a negativemargin-leftequal to half the width.