Vertically Centering DIVs
The ability to vertically center a DIV in HTML is one of the holy grails of web development, along with sticky footers and just generally making shit work in IE. I had to vertically centre something recently, and I was sick of using the dirty hacks involving absolute positioning, negative margins and extra HTML elements.
The solution below works in all modern browsers, and is supported in IE8 and above.
<div id=”centered”>
I’m centered vertically and horizontally
</div>
#centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 200px;
}
It is listed as Method 4 on this page, but frankly should be Method 1.
The reason I love this solution so much is that we have all been using margin: 0 auto; to horizontally center things for yonks. This answers the age old question of, well, why doesn’t it work vertically either? Another big plus is no extra HTML elements. Generally you’re forced to create one to horizontally center an item. Another to offset it 50% from the top and, depending on your cross browser confidence, another to negatively offset this with a margin. ■
An effect that makes the Crikkket web app unique is it’s crisp 1px highlights. I’ve always heard these described as specular highlights, but I don’t believe that’s the correct term. Anyhoo, I was just playing with CSS3 and I thought I’d have a crack at animating the same effect on a button. So here you go!
Demo and Source are on JSFiddle.
You will notice that the highlight width is locked off, because I think if it scaled with long buttons the effect wouldn’t be as believable. I also know that I could have done this with pseudo elements like ::before, but sometimes it’s good to see exactly what’s going on in the DOM.
Disclmaier: Webkit only. No images used.
