100％高度的输入字段和垂直对齐文本

Question

Maybe a duplicate but I did not found a question with a similar problem.

Ok, I've to create a 100% height input field that centers the text vertically and horizontally. The problem is that if I set the line-height to window -width the cursor gets the same size in Chrome.

Any ideas how to center the text without line-height ?

input {
    position: absolute;
    top: 0;
    left 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

Just to set the line-height :

$('input').css({
    lineHeight: $(window).height() + 'px'
});

http://fiddle.jshell.net/G9uVw/

Update

It seems that the question needs to be changed. The problem is that oldIE doesn't center the text, but all other browsers do. So the new question is, how can we check if a browser supports this auto-center - feature?! (Since we know that feature?! (Since we know that ua`-sniffing is evil, I don't want to check for a particular browser...)

Update2

It seems that this is a bug in webkit: https://code.google.com/p/chromium/issues/detail?id=47284

Answer 1

Try this, should align vertically:

input {

    //// vertical align
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    ////

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

Not sure if the height: 100% will avoid the job, try it without height: 100% if it doesn't work. If that's the case, maybe the solution is to calculate the height everytime with javascript/jquery.