jquery - 将 div 在其他输入和 div 中垂直和水平居中

Question

我已经对此进行了一些搜索，这让我发疯:

• 我需要将文本“CENTER & MIDDLE THIS”置于 textarea 下方和 .input 底部上方的区域居中像这样:

代码: http://jsfiddle.net/qhoc/zqYUJ/2/

现在看起来好像是 input1 底部和 input 之间的中间对齐

条件:

1. 我们知道.input1输入高度为30px
2. 我宁愿不指定 textarea 的高度，但如果必须这样做，虽然不太理想，但还可以。
3. .input 高度和宽度已在代码中指定。
4. 我也不喜欢使用 jQuery。我也不喜欢对像素位置进行“硬编码”，因为稍后，textarea 的高度可能会通过 jQuery 进行更改，具体取决于其中有多少文本。

帮助将不胜感激!!!

Answer 1

尝试使用dispaly:table-cell

.input {
    height:300px;
    width: 400px;
    border: 1px solid black; display:table
}
.input1 input {
    width: 100%;
    height: 30px;     
}
.input2 textarea {
    width: 100%;    
}
.input3 {
    width: 100%;
    height:100%; display:table-row;
    text-align:center;     
}
.input3 div {
    display:table-cell; 
    vertical-align:middle;
    margin:auto 0
} 

<强> DEMO