7 replies [Last post]
Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 35 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Hello Frens I need such css code which could keep div center according to windows height and width. Should be flexible in every resolution.In every resolution the div should be center vertically and horizontally.Pure CSS Code No any table.

Please Help meeeee

:thumbsup: :thumbsup: :thumbsup:

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Have a look there

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll use the display:table

You'll use the display:table and table-cell properties for that but you'll need a fix for IE that involves an extra element that you shift down by 50% and then drag back it's child by a negative 50% amount to find the vertical center.

Googling on 'css vertical centering' or searching the forum will throw up guides to follow.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 35 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Thanks DanA it works but...

:rolleyes: :rolleyes:
Thanks DanA it works but it doesnot work in text.
Could U please give me some more hint

:thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No I think you will need to

No I think you will need to give us more hint! how about actually explaining what your doing and what code you're working with rather than have us just explain various generic approaches to vertical centering.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 35 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

As per your infromation

razer testing

this text should be vertically and horizontally center
What ever the computer resolution
that shouldnot effect the design

Css Code goes as below

html, body{height:100%;}

body {
margin:0;
padding:0;
text-align:center;
min-height:200px;
min-width:200px;
}
div.centre {
height:100%;
width:200px;
margin-left:auto;
margin-right:auto;
position:relative;

}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Re-read my post then look

Re-read my post then look and read carefully the links DanA supplied especially the first one and follow any sub links that you may find to other examples, as things look from your code you haven't tried many tricks to center things, 100% height won't do it

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 35 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Thanks Hugo and DanA

I hadnot watch carefully the link of DanA So, I couldnot got my answer.But now I got my answer.

:rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: