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. ■
24 Notes/ Hide
-
xn----slbefavdc9aecr2ax8cfbiip9g reblogged this from taitems
-
trampoline1k reblogged this from taitems
-
baddeo likes this
-
reach1to1 likes this
-
jurosik likes this
-
jotarun likes this
-
frederickpolk likes this
-
digdog likes this
-
kylewritescode likes this
-
luminae likes this
-
pixelblotch likes this
-
rainerbird reblogged this from taitems and added:
#yes
-
taitems posted this