Vertical Algin Textarea

Question

Hi I have a text box inside a page and I need it horizontally AND vertically aligned middle. I have been trying the "display table" method with not avail.

The problem is when I set the table-row my text box looses all formatting I have set on it and shrinks down to the smallest size,it also sticks to the left side of the page.

Any help is much appreciated!

<div id="outer">
     <div class="inner">                           
          <textarea id="text" ></textarea>                        
     </div>
</div>

CSS

#outer{ 
  display:table-row;
  height:230px;
}

#inner{
  display:table-cell;
  vertical-align:middle;
}

#text{
    background:#e9e9e9;
    padding:10px;
    resize: none;
    font-size: 10px;
    color: #000; 
    height: 100px;
    width: 95%;  
}

Answer 1

Try using display:table on the outer div and table-cell on the inner div.

jsFiddle example (border added to see alignment)

#outer {
    height:230px;
    border:1px solid #999;
    display:table;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#text {
    background:#e9e9e9;
    padding:10px;
    resize: none;
    font-size: 10px;
    color: #000;
    height: 100px;
    width: 95%;
}

Answer 2

Since you have declared the height of the element you want centered, you can use absolute centering, as described here. Simply add a

text-align: center

To add horizontal centering.