Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centre a DIV Regardless of Screen Size 2

Status
Not open for further replies.

kurio71

Technical User
Oct 1, 2009
172
MX
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
 
 http://files.engineering.com/getfile.aspx?folder=96ec020b-f291-4028-9564-0d47d3d4e70b&file=staffhome.zip
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.
 
Thanks Chris, so I need to create an outer DIV? I've attached my whole webpage.

Support Technician in an Educational Environmant
 
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.
 
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
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
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.
 
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top