css - Firefox 上的样式占位符

Question

我想要做的是让占位符出现在中心 50% 顶部和 50% 左侧。它在 Chrome 中似乎不错，但在 Firefox 23 中却不行。我有一个例子 here .以及我的风格:

textarea::-moz-placeholder {
     position: relative;
     font-size: 16px;
     font-style: italic;
     color: #ABABAB;
     top: 50%;
     text-align: center;
}

textarea::-webkit-input-placeholder {
    position: relative;
    font-size: 16px;
    font-style: italic;
    color: #ABABAB;
    top: 50%;
    text-align: center;
}

如果有人能提供帮助，我将不胜感激，谢谢!

Answer 1

我尝试了一些奇怪的东西，但这似乎很合适:
看到这个 jsFiddle

您必须将 required 属性放在 textarea 上:

<textarea placeholder="Placeholder" required="required"></textarea>

这是 CSS :

textarea {
    height: 300px;
    width: 300px;
    /* center the text by default */
    text-align:center;
    resize: none;
}

/* align the text left when insert */
textarea:focus {text-align: left;} 
/* textarea not empty will have text align left */
textarea:not(:invalid) {text-align: left;}
/* remove the red shadow of firefox if textarea is empty */
textarea:invalid {box-shadow: none;}
/* hide the placeholder on focus */
textarea:focus::-moz-placeholder {opacity: 0;}

textarea::-moz-placeholder {
    position: relative;
    font-size: 16px;
    font-style: italic;
    color: #ABABAB;
    /* the main trick to center the placeholder vertically */
    line-height:300px;
}

textarea::-webkit-input-placeholder {
    position: relative;
    font-size: 16px;
    font-style: italic;
    color: #ABABAB;    
    line-height: 300px; 
    /* keep the placeholder centered under chrome */
    text-align: center;
}