Posted By

1man on 07/05/06


Tagged

div css dead centre


Versions (?)

Who likes this?

266 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
overhang
jamesming
crashdr
nickdoherty
sudhakmy
rtipton
chavcho
titox
mrjthethird
poGDI
grassdog
Shocm
robotoverlord
pixelz
RM
baqc
callmeblessed
aleprieto
LostCore
Hilyin
silverskymedia
kungpoo
yuindustries
thinkcirca
sarfraznawaz2005
ntulip
enajenkins
windmarble
jeroldan
NagaTragic1322
owais
cornellsteven
gpenston
johnnytoobad
LyndseyPearce
irishsk
bpdp
hamiltonmascioli
johnloy
Triconium
bakin9
esquareda
macowell
xenuan
brilliant
tobewan
fragmentist
nightowl
nb109
sheedy
randyjhunt
zartgesotten
tmbrenneke
hasantayyar
marcustrapp
redbaron_ict
obsessivejosh
yoitsben
helloworlder
cnsaturn
acosonic
GrillPhil
davidinv
marvin_speakman
MicronXD
nhartjes
johnfarrelly
hendersk
sspitler01
lunacye
ruhanirabin
ren
fuzzylollipop
cindreta
Michael01
NyX
xpoint
simmu
cossette
Zwendel
scitrenbaumgmailcom
eivind
dancrew32
vhinsce
benrudolph
babel2675
longzero
tariel
ryanisinallofus
leecsargent
d0ri0
cdrascic
sandynata
alexteg
oleg
colingardom
inj
kwanhon
alessio2
ricosushi
amasters
siyingui
ktcleo
fordsbasement
jwitthoff
giuliom
janvdm
mister
pchengsf
shalomfriss
janpoem
convergine
koteus
ljayz
naeemnur
widgetyegg
seanpowell
bobbym245
azipagan
lromak
socheif
capsella
bradless
poet
romainsauger
zanetaylor
connorjackson
chendrix
jirirybar
Some0ne
sach
charlesp1138
tspitzr
andrewbowley
aegony
dwenaus
michellebracken
intothelight
qubestream
samkamerer
scilec
julianrhyswilliams
kenpar
gauravjassal
rokfresh
albertomori
mnezes
rajashri78
logiq
dajocko
abbyabigale
jumichot
icecreamboyy
dubogii
merritt212
Ideandro
agdm
guo3823538
Briantjuh
carcinogen75
banjomamo
bindzus
rlynch3
dondalos
jbyerson
DesignGoggles
fjckls
meetzah
loucypher
diogoweb
MadRukus
robfahy
mr2p
doctrine
clinicdigital
adunaway
rcraven
speckledjim
gravyplaya
lashon
shangle
clac
xhiena
ringo380
dima7b
symsec
clacwebstudio
oceatoon
jcroft
astroShark
dennywalker
lookingforsome
vggallego
swapnilgg
ajcarrillo
rentnil
theinkcreative
Beppoi
atulkransingh
RicardoMedina


Dead Centre a DIV


 / Published in: CSS
 

URL: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

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

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

Posted By: pixelz on November 4, 2008

@neal_grosskopf: sorry dude - that doesn't work. will centre horizontally but not vertically. I've seen this kind of solution before, and while it's clunky, there really is no better way to centre something vertically on the screen in CSS, regardless of the screen height (unless you start messing around with javascript like we used to do back in '99)

Posted By: kezoon on December 31, 2008

Thanks this was very useful. I think IE sucks when it comes to DIV's, but there are work arounds for most things.

Anyway thanks again! eCommerce Blog

Posted By: dsntos on February 28, 2009

There's actually a more efficient way of doing this.

Check this blog post http://perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/

Posted By: fsn on May 20, 2009

That was a lot of css for such a simple thing...

Here's the shortest line of codefix:

deadCenter {

background: #f2f2f2;

width: 700px;
height: 450px;

margin: -225px 0 0 -350px;
position: absolute;
top: 50%;
left: 50%;
}
Posted By: kevdotbadger on October 6, 2009

i agree with fsn.

margin-left is negative the width (800 width would result in -400, 900 width would result in -450) margin-top is negative the height (800 height would result in -400)

There was a decent article yesterday on Smashsing Magazine about this http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics3

Posted By: domioanna on July 30, 2010

...why not just use 'margin: 0 auto;'. This would be a much simpler way, with less CSS coding.

Posted By: domioanna on July 30, 2010

or even "margin: auto;" if you wanted it centered vertically and horizontally.

Posted By: codamani on October 2, 2010

the most common rule i use to center divs horizantally is :

div.mydiv{ width:700px; /an example/ margin:0 auto; }

Posted By: jech on November 8, 2010

yeah this one's old style

Posted By: VictorBjelkholm on August 28, 2011

@jech, do not call it old style. Call it old school, like the cool kids :)

Why not these 3 rows?

#block {
margin: 0 auto;
}
Posted By: vultur on August 28, 2012

You should always use margin: 0 auto; to center a div. Using position: absolute; removes your div from the flow of your page, and you will have to use weird margins to position the other divs around it, this snippets of codes will cause alot more trouble for new comers than good.

You need to login to post a comment.