在其他输入和div之间垂直和水平居中div

Question

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

• 我需要将文字“ CENTER＆amp; MIDDLE THIS ”置于textarea下方和.input底部上方的区域中，如下所示：

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

现在似乎是input1和input的底部之间的中间对齐

条件：

1. 我们知道.input1 input身高是30px
2. 我更喜欢不指定textarea的高度，但如果必须，那就不太理想了，但还行。
3. .input高度和宽度已在代码中指定。
4. 我也不想使用jQuery。我不喜欢“硬编码”像素位置，因为稍后，textarea高度可能会因jQuery的大小而改变。{/ li>

   帮助会很感激!!!

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

Answer 2

看看你更新的小提琴： 只需设置left和top Fiddle

Answer 3

只需改变你的'.input3 div'风格。这可能会有所帮助......

  .input3 div {
     text-align: center;
     background: red;
     top: 50%;
     margin: 80px;
 }    

Answer 4

在你的情况下应该是：

top: 50%;
left:27%;

http://jsfiddle.net/zqYUJ/43/embedded/result/