CODEWITHSUNDEEP
htmlcss
simpatico
simpatico

Reputation: 11087

How to bottom center webpage?

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').

Upvotes: 1

Views: 104

Answers (1)

dtbarne
dtbarne

Reputation: 8200

Set left to 50% and add a negative margin-left equal to half the width.

<body style="position: absolute; bottom: 0; width: 980px; left: 50%; margin-left: -490px;">

Upvotes: 3

Related Questions