How to begin typing from vertical middle of textarea - html

Question

I have a textarea, like this
<textarea rows="10" cols="50"></textarea>
In default the cursor will start from the top left of the textarea, But i want it to be started from vertical and horizontal center of textarea like text aligned to middle in a table-cell.
I have achieved horizontal center by applying text-align:center, But how to make it vertically center?
Something like this:
It should be like this if more text is entered.
I tried this CSS:
textarea {
vertical-align:middle;
text-align:center;
display:table-cell;
}

Answer 1

I cannot think of a way to do this with just <textarea> but I have a demo that almost works using a contenteditable <div>. From that article:
Browser support for contenteditable is surprisingly good
The only problem I see is when the text fills the vertical space the <div> expands. I cannot think of any way to stop this in CSS (and I tried many different properties!). It should be possible to intercept this in JavaScript and stop the <div> expanding.
HTML
<div contenteditable="true"></div>
CSS
div {
height:150px;
width:350px;
border:1px solid black;
vertical-align:middle;
text-align:center;
display:table-cell;
}

Answer 2

you have to following code for css.
<style>
textarea {
text-align:center;
padding:50px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
}
</style>

Answer 3

Ok, I fiddled around a bit, and came up with a solution immitating what you need, it is a div with a textarea inside:
HTML
<div id="expandedText">
<textarea></textarea>
</div>
CSS
div#expandedText {
width: 250px;
height: 50px;
background-color: #fff;
padding: 50px 10px 40px 10px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
}
div#expandedText > textarea {
width: 250px;
height: 50px;
overflow: hidden;
text-align: center;
resize: none;
outline: 0;
border: 0;
}