.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
This doesn’t work on IE…
works in IE 8 for me.
If this doesn’t work, try using javascript to set the top and left instead… ;)
I’d use display:inline-block for that. Works much better (dynamic vertical and horizontal dimersions for both container and content).
So, what do I do with the HTML?
Seriously I lol’d. Make a div with class center.
Don’t try to make this person feel stupid. It’s a reasonable question. When I was learning css it always threw me off when they didn’t have the html listed.
Excellent, thank you. No troubles here.. works well in IE, FF, etc.
Ugh! I’m really having trouble getting a popup div to center vertically on mobile devices. When I’m scrolled half way down the screen and click the link button, the popup appears up top where I cannot see it. Any suggestions?
I suppose you have found your answer already :)
But for the other new guys like me, you need to change “position: absolute” to “position: fixed”.
Cool! This is just what I was looking for (I’m not lying.)!
same here buddy
I’ve been using this, but… let’s say you resize your window to like 100px wide. Then content starts to get cut off on the left side and you can’t scroll to it. Is there a fix for this?
Very nice solution. This helped me center a “loading” image within a fluid width container. Worked like a charm.
this doesn’t work on iOS, but all good for cross browsers for me…why?!?
So I had to get a job done in like, 20 minutes. It was horrible, there was fire and brimstone and creatures which even those with the most active imagination could never fathom in their most horrible nightmares. There were bits of CSS everywhere, the HTML looked horrible, but I kept searching for a way, a way to fix this and make it gleam with the power of righteousness and the beauty of the host of heaven.
Then I found this, and in a single moment, in which you barely had time to blink, everything was fixed, and oh how it was fixed. It was a wonder to behold. You had to shed a tear at how beautiful it looked, the fire subsided, the brimstone turned into those little elephants you can always see dancing their little dance around the edge of your vision, and balance was restored. All was well in the world, thanks to this post.
Thank you.
You made my day Bob. Thank YOU.
thanks so much chris – it works wonderfully – only thing is like marcusLAND said it doesn’t work on iPhone (which in my business is unfortunately how a lot of people check out my work ) – it cuts off the top on mine –
any fix
You could use media queries to detect the width of the screen and only use the centre trick if the screen is smaller than the height, and use ‘margin: 0 auto;’ for the vertical centre.
Whoops, I meant higher than the content O.o
Τhank you!
You can try and with display:inline-block …
I am having trouble with this as well…
If I have multiple images of different proportions?
Also, one of my files has text that would be on the left side of the image, and therefore its dividing the remaining space – from the end of the text – to the right border.
works great to center the div but i can’t get a minimum width to work. any suggestions? thanks!
You can use
min-width: 200px;
for getting the<div>
go not below200px
in width.I can’t tell you how many times Chris has saved me hours of time and enhanced my reputation with my clients with his great tips and posts. This is another trick that I have to keep relearning every time it comes up. I think think this post has finally solved it for me!
Its working on IE 9 but having problems in safari..
Chris,
The implementation is really not that obvious. I think you should show a more complete example:
what css and html goes with the img tag
what css and html goes into the containing element
That way people can play with it and apply it faster to their case.
Ron
.content
{
width: 600px;
height: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -100px;
;
}
Fix for the problem of the content disappearing without the option to scroll:
.content {width: 600px;height: 400px}
@media only screen and (min-height: 400px) { /the height of your div/
.content{position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px}
}
@media only screen and (max-height: 399px) {
.content {margin-top:10px;margin-bottom:10px} /you can do whatever you want here, this just adds space to the top and bottom to make it seem it is still floating in the middle, but will have scroll/
}
and obviously you’ll need this to keep it vertically in center:
{padding:0; margin: 0 auto}
Can anyone show me css-tricks.com footer hover line effects css or js. how it is happening.
Just CSS, It’s a span that have horizontal gradient in background+change background-position on hover.
This method makes a great practice especially during lightboxes popups using js.
I find it kind of funny that it was extremely easy to do this 15 years ago with tables and now we can’t do it “correctly” without hacks. If you’re dealing with a variable height div that you want to vertically center an object in, your in for some extra “fun” as well.
Thank you!! I was trying to figure this out for a logo at the top of a page (a
<
div class=”logo”> inside of a
<
div class=”header”>). I had to tweak it a bit by either changing it to “position: relative;” instead of “position: absolute;” or removing the position element altogether, but it worked!! I’ll definitely remember this neat trick and pass it on.
Sorry, never mind… removing the position property altogether did not work (I forgot to save the css style sheet before refreshing… stupid mistake), but making it “relative” still works!
This is somewhat wrong. It’s not going to work in all conditions.
To absolutely center a inline-block level element vertically and horizontally, use the following:
Yes, This is better solution.
Thanks Chris! I’d been searching for a while when I found this and it worked!
the easy way you can do it if you make parent position relative and child absolute, then you can just make
top,right,bottom,left = 0; and margin: auto;
Posted in 2009, but still helpful. Thank you!
This is an excellent example of why html + css + javascript + server-side code is such a ridiculous kludge. This wacky paradigm could have been “fixed” a long, long time ago. But instead Microsoft and Netscape had to go to war. It’s been a cluster-ferk ever since. All you script kiddies waste about 95% of your time trying to figure out the most basic issues – instead of writing web apps that actually do something useful. There should have been a single, unified language for the server / browser paradigm. What we have now is pure lunacy.
After HOURS of trying many things and failing to see result in IE and FF (Chrome was OK), I was totally baffled… I mean, Chris’s method should be the one method that works in all browsers!
Turns out I totally missed the following at the top of the style.css file:
html {height: 100%;}
I feel rather stupid =/
Lol… Seriously?
This is not a trick… This is point-blank. Of course that positioning on 50% top/left and then having negative margins half the div’s dimensions makes it centered =))
But no one has a fixed div nowadays.
Teaching this is like teaching someone to eat with a spoon… Either they’re 3-4 years old or challenged.
Here it is:
HTML:
CSS:
This is an image that’s perfectly centered both vertically and horizontally. Of course, you can have a div instead (just tell it it should display: inline-block;)
And the .container doesn’t have to be fixed or have a height/width set (but no-height set equals to the height of it’s content, so you can’t notice any vertical-alignment). I’m just used to a fixed positioned container because I use this code mainly to center an image on the entire viewport, on top everything else, like in a gallery… for images I add the possibility of “maximizing”
Actually a better implement would be like this:
.center {
position: absolute;
display: block;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
of course do not forget to vendorize it!!!
.links {
position: absolute;
margin-left: 120px;
margin-top: -130px;
}
<
div class=”links” >Worked fine for me at middle of th div </div
Nice-this-code-works-fine-Thanks-Alot.
What about this??
OR this for modern browsers:
I’am done four way of ‘Exactly Center position H&V’.
1. Using Flex, align-items in container.
2. The item must have margin:auto.
html, body{
height: 100%;
}
.wrapper{
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.center{
width:100px;
height: 100px;
background-color: aquamarine;
margin: auto;
}
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}
Its really Helpful sir.. thank you.
I love you. This just fixed my entire life. May the blessings of the heavens be upon you forever.