100% height input-field and align text vertically <p>Maybe a duplicate but I did not found a question with a similar problem.</p> <p>Ok, I've to create a <code>100%</code> height input field that centers the text vertically and horizontally. The problem is that if I set the <code>line-height</code> to <code>window</code>-width the <strong>cursor</strong> gets the same size in Chrome.</p> <p>Any ideas how to center the text without <code>line-height</code>?</p> <pre><code>input { position: absolute; top: 0; left 0; margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; border: 0; outline: 0 } </code></pre> <p>Just to set the <code>line-height</code>:</p> <pre><code>$('input').css({ lineHeight: $(window).height() + 'px' }); </code></pre> <p><a href="http://fiddle.jshell.net/G9uVw/" rel="nofollow">http://fiddle.jshell.net/G9uVw/</a></p> <p><strong>Update</strong></p> <p>It seems that the question needs to be changed. The problem is that <strong>oldIE</strong> doesn't center the text, but all other browsers do. So the new question is, how can we check if a browser supports this <code>auto-center</code>-<code>feature?! (Since we know that</code>ua`-sniffing is evil, I don't want to check for a particular browser...)</p> <p><strong>Update2</strong></p> <p>It seems that this is a bug in webkit: <a href="https://code.google.com/p/chromium/issues/detail?id=47284" rel="nofollow">https://code.google.com/p/chromium/issues/detail?id=47284</a></p>