One of the wonderful ironies of CSS is that after years of puritanical preaching about the evils of non-semantic table elements, the best-practice recommendation for centering a div of unknown dimensions, assuming you want any kind of legacy support, is[0]:<p><pre><code> <div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;"></div>
</div>
</div>
</code></pre>
[0] <a href="http://howtocenterincss.com/#contentType=div&horizontal=center&vertical=middle&browser.IE=8" rel="nofollow">http://howtocenterincss.com/#contentType=div&horizontal=cent...</a>
Just use flex-box. And by "use", I mean get ready to study it, change the way you write CSS, give it all of your worldly possessions, and eventually collect money for it at the airport.
You see, kiddies, we used to have programs that did all that for you. There was this program called Dreamweaver. You just opened up a design window and laid out the page by pointing and clicking. Anyone could do it. But if anyone could do it, "web programmers" weren't needed. So CSS was invented to make it more like programming, and especially to make it so complicated that it couldn't be done by pointing and clicking.
This is an example where the headline on Hacker News is 100x better than the original headline. I do wish Hacker News allowed these kinds of headlines, which draw out the parts of the article that are of most interest to the Hacker News crowd.
All you need to do is simply take the 20 part video course <a href="http://flexbox.io/" rel="nofollow">http://flexbox.io/</a>. Couldn't be easier !
This is has been a problem for a long time, but it's fixed now:
<a href="https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/" rel="nofollow">https://philipwalton.github.io/solved-by-flexbox/demos/verti...</a>
<a href="http://caniuse.com/#feat=flexbox" rel="nofollow">http://caniuse.com/#feat=flexbox</a>
<p><pre><code> .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</code></pre>
now just put it in a relatively positioned container and you're done. i thought this was common knowledge by now, i haven't used `table-cell` in years.
Follow-up: Does anyone know how to best host this site?
a) with less than 50 users all-time
b) easily updated daily (blog-style) by a 7 year old
c) is approximately free<p>Wordpress with her custom theme seems to fail C.
Github pages / Jekyll is failing B
display:table and its kin are the greatest thing I ever discovered in css. No more centering problems and easy to reason about. I'm not sure if people just don't know about it, or there are use-cases where it doesn't work for them. I'll definitely use Flexbox when its more widely supported, though.
I love "display: flex" so much. I'm working on extensions for modern browsers, so I can use it everywhere. Makes everything so much easier. Also cases where you would normally use ".left { float: left; }" and ".right { float: right; }".
Why isn't this actually an easy, obvious part of CSS? It doesn't seem like there is anything that makes this more complicated to implement than anything else people use daily... it's also an obvious feature. Reasons?
If you know the height of your centered box, it's not <i>that hard</i>. Create a wrapper div whose top is set 50% down the page but has a negative offset which is 50% the height of the box:<p><pre><code> .vertically-centered {
position: absolute
top: 50%;
height: 200px;
margin-top: -100px; /* minus half of `height` */
}
</code></pre>
If you have trouble, try setting `height` to 100% on the <body> tag and any parents
Has anybody, possibly, probably, an academic, given HTML+CSS a semantics?<p>I'm thinking something like whatever minimal core would be considered the PCF of the web world.
It's really not that hard.<p><div class="center-this"><div>Stuff</div></div><p>.center-this {display:table;}
.center-this > div {display:table-cell;height:100%;vertical-align:middle;}<p>I even code pen'd it for you: <a href="http://codepen.io/anon/pen/RPEypL" rel="nofollow">http://codepen.io/anon/pen/RPEypL</a>