Vertically center CSS techniques don't work in Chrome
- by at.
I've gone through stackoverflow questions and a whole bunch of articles on vertically centering text like the following:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
None of the techniques seem to work with the latest version of Chrome. Is that just the nature of Chrome? My text just always appears at the top. It seems that whenever I use 50% or 100% as values for CSS's height or top, nothing happens.
I just need a single line of text vertically centered. line-height isn't helpful because I want it centered in the middle of the browser window... I don't know how tall the browser window is going to be.
UPDATE: The problem is apparently Foundation 4. Once I delete the following everything works as expected:
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
Any idea on how to make it work with Foundation 4?