Mobile Safari (iPhone) CSS vertical centering/line-height CSS issues

Question

Got an issue I've been trying to solve without much luck for a while across various projects.

I've got some divs 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.

Answer 1

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.

Answer 2

you can use display:table-cell and vertical-align:middle for the div containing the text