The critical piece I'm always missing is how to center a div vertically if you don't know its height?
I found this a few days ago, I haven't tried it yet but it looks promising.
http://snippetrepo.com/snippets/vertical-align-anything-with...
The complete guide to centering a div
11–20 of 170 posts
Re: The complete guide to centering a div
#12I'm centered!
That works great vertically! Did you even read the article?
Re: The complete guide to centering a div
#13What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?
Re: The complete guide to centering a div
#14I'm centered!
Relax, I'm not recommending anyone actually do it that way. I'm just old and found it humorous that something as simple as centering a div requires an entire article.
Re: The complete guide to centering a div
#15> Centering a div Within a div, Horizontally and Vertically
The code in this section is incorrect. "margin: auto" does nothing in the vertical direction. If you set the height of the outer div to something more than 160 px, you will see that the inner div is not centered.
Re: The complete guide to centering a div
#16I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled with front-end code.)
Re: The complete guide to centering a div
#17What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?
Then unfortunately you have to calculate it with JS if it varies. Vertically centering divs has always been a gigantic pain-in-the-ass. If anyone has a better idea for doing this without JS, please let me know. Once CSS implements variable-based elements (ie #div.height) then we'll have a lot more control.
Re: The complete guide to centering a div
#18The critical piece I'm always missing is how to center a div vertically if you don't know its height?
Heres's a trick using pseudo elements : http://codepen.io/anon/pen/pIFna
Re: The complete guide to centering a div
#19This is a pointless post. Use the TABLE tag. Yes, it will violate the purity of CSS, but you can trust it, and it will make your day better because it will free you angst and from extensive cross-browser testing. Simple is better than complex. Straightforward is better than arcane.
Using display: table-cell on a div is a more semantic approach than using .
[deleted]
Re: The complete guide to centering a div
#20The critical piece I'm always missing is how to center a div vertically if you don't know its height?
I found this a few days ago, I haven't tried it yet but it looks promising. http://snippetrepo.com/snippets/vertical-align-anything-with...
Did he make a typo?
http://codepen.io/cheapsteak/pen/axJit
Doesn't work, unless you change `position: relative` to `position: absolute`