100% 高度输入字段并垂直对齐文本答案

【问题标题】：100% height input-field and align text vertically100% 高度输入字段并垂直对齐文本
【发布时间】：2013-06-15 07:52:24
【问题描述】：

可能是重复的，但我没有发现有类似问题的问题。

好的，我要创建一个100% 高度输入字段，使文本垂直和水平居中。问题是，如果我将line-height 设置为window-width，则 cursor 在 Chrome 中的大小相同。

任何想法如何在没有line-height 的情况下使文本居中？

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

只需设置line-height:

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

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

更新

看来问题需要改一下了。问题是 oldIE 不会使文本居中，但所有其他浏览器都会这样做。所以新的问题是，我们如何检查浏览器是否支持auto-center-feature?! (Since we know thatua`-sniffing 是邪恶的，我不想检查特定的浏览器...）

更新2

看来这是webkit的一个bug：https://code.google.com/p/chromium/issues/detail?id=47284

【问题讨论】：

我删除了 JavaScript lineheight 并且文本居中。我使用的是 Chrome 版本 27.0.1453.110。
@RyanE 是的，当然！在 chrome 中将文本居中是没有问题的。但以 oldIe 为例。我现在在玩 ff 和歌剧。
...Android 上也是 chrome
@3rror404 好的，这似乎只发生在oldIE上。但我讨厌ua-sniffing！
@RyanE 这个愚蠢的 IE8...

标签： javascript jquery height css

【解决方案1】：

试试这个，应该垂直对齐：

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
}

不确定 height: 100% 是否会避免工作，如果不工作，请尝试不使用 height: 100%。如果是这种情况，也许解决方案是每次使用 javascript/jquery 计算高度。

【讨论】：