Mobile Safari (iPhone) CSS vertical centering/line-height CSS issues
css, iphone, mobile, mobile-safari
Solution
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
Problem
Got an issue I've been trying to solve without much luck for a while across various projects. I've got some `div`s with text inside that is centered with CSS using `display: block` and `line-height`. I also tried with `padding` and a fixed height. Typically, these are setup as either just headers, or sometimes buttons. Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to `center` in the mobile browser, but this throws out all the other browsers and this is a responsive design. Has anyone experienced this issue? I've got `-webkit-text-size-adjust: 100%;` but that doesn't seem to be related to this issue. So far my hack work around is to have devices only css which sets a different `line-height`, but as you can imagine, that's a horrible solution.