advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

1man on 07/05/06


Tagged

div css dead centre


Versions (?)


Who likes this?

74 people have marked this snippet as a favorite

luman
jonbaer
Fixe
expertseries
panatlantica
marc0047
jkochis
jpb
fatihturan
flodar
potdarko
markfavazza
px
zensir
dojob
ttscoff
clifton
visualAesthetic
theMacpenguin
Hollow
block
berkes
fugue
koncept
icarus
mblarsen
SpinZ
manub
fael
rich13
swiggy
vali29
heinz1959
SamuelMiller
aziz
dobbshead
m-alo
gasface
torkil
arala22
willgarrison
visuallyspun
starprojector
jongmr
jbreen
d4rk
jmelgoza
avioli
stphnclysmth
sosof
Wizzle
jatkins
rd3k
Baris
adamsimms
mb
chill3d
shalo
zeljkoprsa
isaac
omeganot
SmpleJohn
MondoMan
Tamedo
blackabee
unravelme1
jamesming
crashdr
nickdoherty
sudhakmy
chavcho
titox
mrjthethird
poGDI


Dead Centre a DIV

Published in: CSS 

Taken from Dead Centre. Adjust #content depending on the size div you need.

Plain TextExpand 
  1. body 
  2. 	{
  3. 	margin: 0px
  4. 	}
  5.  
  6. #horizon        
  7. 	{
  8. 	color: white;
  9. 	background-color: #0ff;
  10. 	text-align: center;
  11. 	position: absolute;
  12. 	top: 50%;
  13. 	left: 0px;
  14. 	width: 100%;
  15. 	height: 1px;
  16. 	overflow: visible;
  17. 	visibility: visible;
  18. 	display: block
  19. 	}
  20.  
  21. #content    
  22. 	{
  23. 	position: absolute;
  24. 	left: 50%;
  25. 	width: 250px; /* Overall width of div */
  26. 	height: 70px; /* Overall height of div */
  27. 	top: -35px; /* half of the overall height */
  28.         margin-left: -125px; /* half of the overall width */
  29.         visibility: visible
  30. 	}

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: vsync on January 30, 2008

i have a better way that doesn't depend on the width. put a DIV inside a DIV. first DIV is "position:fixed/absolute", the inner one is "margin:0 auto".

anyway, this is good for things with known HEIGHT, cause you need to calculate and cut by half..

Posted By: neal_grosskopf on May 16, 2008

Centering a div is a lot less complicated than this. Simply apply a fixed width to your div i.e div { width: 740px; } and add margin: auto; That's it!

div { width: 740px; margin: auto; }

Posted By: monohymn on September 17, 2008

I think it's a way of centering something in the exact middle of a browser window, as opposed to just a center column. Like a picture. Dead center in the middle of your window. Something that was really easy to do with tables. Before they were outlawed...

You need to login to post a comment.