409 posts
    Has been part of the Envato Community for over 4 years Sells items exclusively on Envato Market Located in India
Dhruv says

Hi Guys,

Do you have any tips on how to vertically align a div via CSS ?

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment says

.

377 posts
    Has referred 1000+ members Has sold $2M+ on Envato Market Has collected 10+ items on Envato Market Power Elite Author: Sold more than $1M on Envato Market
+6 more
GoodLayers says

Is that posible??
I think you need JQuery to do that thing or may be fixed position with “absolute”....

365 posts
    Has referred 200+ members Has sold $250,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 50+ items on Envato Market
+7 more
OrangeIdea says
div#center {
 background:#CCC;
 width:300px;
 height:200px;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-150px;
 }
 <body>
 <div id="┬╗center┬╗">some text</div>
 </body>

text in div
div {
height: 200px;
display: table-cell;
vertical-align: middle;
}

<div>
<p>text</p>
</div>
97 posts
    Sells items exclusively on Envato Market Elite Author: Sold more than $75,000 on Envato Market Made it to the Authors' Hall of Fame Located in Finland
+4 more
Smuliii says

I used this piece of code in my latest theme:

div {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

Demo: http://jsfiddle.net/B6DKY/

ProgressionStudios
ProgressionStudios Recent Posts Threads Started
221 posts
    Elite Author: Sold more than $75,000 on Envato Market Has sold $750,000+ on Envato Market Had an item featured on Envato Market Made it to the Authors' Hall of Fame
+9 more
ProgressionStudios says
409 posts
    Has been part of the Envato Community for over 4 years Sells items exclusively on Envato Market Located in India
Dhruv says

Thank you all for replying and helping me out.

@Smuliii method worked perfectly for me and @OrangeIdea method too, but with some glitches.

@ProgressionStudios The article is very interesting, I’m reading it right now..

@diogoredin I still don’t know what the . means

@saintdo certainly possible, try out these methods now if you want to.

1625 posts Building the Web.
    Has referred 50+ members Has sold $250,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 50+ items on Envato Market
+7 more
ZoomIt says
ProgressionStudios said
I used this article many times:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Yes, but table render is hard on the browser.

Try to turn it off in your theme if you are using that, you should see a performance increase

ProgressionStudios
ProgressionStudios Recent Posts Threads Started
221 posts
    Elite Author: Sold more than $75,000 on Envato Market Has sold $750,000+ on Envato Market Had an item featured on Envato Market Made it to the Authors' Hall of Fame
+9 more
ProgressionStudios says

There are 5 different methods in the article. I don’t use the table-cell method.

4247 posts
    Has been part of the Envato Community for over 5 years Has sold $10,000+ on Envato Market Has collected 10+ items on Envato Market Sells items exclusively on Envato Market
+5 more
Aw_Shucks says

One way I know how to vertically align anything that has a horizontal orientation is to turn my head 90 degrees right or left. However, that doesn’t always solve the problem. Let me know if that helps. :)

by
by
by
by
by
by