Centre a DIV Regardless of Screen Size 2

[kurio71]

I'd like to centre the DIV on a webpage regardless of screen size. I used px but that didn't scale well.

<div style="height: 488px; position: absolute; top: 37%; margin-top: -244px; width: 1090px; left: 50%; margin-left: -545px;">

Support Technician in an Educational Environmant

 

[ChrisHirst]

Use a fixed or percentage width (less than 100%) block level element, set with margin: nn auto; in a full width parent block level container.

Where nn can be any value and dimensioning unit you need.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[kurio71]

Thanks Chris, so I need to create an outer DIV? I've attached my whole webpage.

Support Technician in an Educational Environmant

 

[ChrisHirst]

Not necessarily, the 'body' element is a block level element. Just be aware that the document content length may trigger a vertical scroll bar which will reduce the body element by around 20 pixels from the right hand edge.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[southbeach]

I am messing around with responsive design - lol - I am not a designer at all, but I like to learn and I often find myself in a pickle!

Any ways, look at CSS "flex". This is extremely friendly and as the name hences, flexible in turns of centering and expanding containers on the view port.

I think that if properly set/employed, to center a container or object while using flex, all you have to do is set the margin property to "auto".




--
SouthBeach

http://www.fp2php.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[ChrisHirst]

all you have to do is set the margin property to "auto".

So exactly the same way you can without using some 'library' then.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

 

[southbeach]

Not sure what you mean "use of some library".

IFAIK, this is part of CSS3 standard ...

http://www.w3schools.com/cssref/css3_pr_flex.asp

--
SouthBeach

http://www.fp2php.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[ChrisHirst]

It's just the way you described it as CSS "flex" made it appear as if you were talking about some 'bolt on' rather than the CSS3 property 'flex'.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.