It's 2015. Use Flexbox.
Pipe dream for a fair portion of us working in B2B.
When it's 2016, use flexbox.*
transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; position: absolute;is a lot nicer for elements with unknown width/height.
Edit: Forgot the negative signs.
Quite a few people are upvoting this, but please don't do this. :( You break transitions, and transforms like this are subject to subpixel positioning, causing text and other elements to end up blurry sometimes.
All of these techniques have drawbacks and each are useful in different scenarios. You just have to decide which drawbacks are worth it for what you're trying to do.
I pretty much get 'Method: Table Cell' everytime :P
Great tool though does not note the browser support for these options. Personally, I need to know ie7 workarounds. Tested one and it gave me "display: table-cell", which would not work on ie7 at all ( tried and tested ).
We have ie6 down, but ie7 is still a major problem for my development.
My fave centering technique is; http://jsbin.com/qecogi/1/
Agreed. Great tool that gives you all the options you want.
A browser support note is all it needs.
Ie7 browser usage is around 0.1% , if you are spending time and I guess a lot of it since you said are having problems with it, maybe it's time to stop supporting it? Spending time for a 0.1% of users and let's be honest most of those users are not paying for anything since they are using an 10 year old browser and a pretty old computer, seems not a very clever idea to me.
You're assuming a lot of things about someone else's work.
that horizontal centering:
<div style="display:table-cell;vertical-align:middle;"> <div style="margin-left:auto;margin-right:auto;">Text Content</div> </div>