Why in textarea with defined height text is not vertically centered?

I tried to use jQuery .

I put <textarea> inside a <div> , positioning with absolute and calculating the top value with jQuery . It also already does the automatic adjustment for when you enter more words or fewer words.

HTML:

<div>
  <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>
</div>

CSS:

div {
  width: 200px;
  height: 200px;
  background: #fff;
  position: relative;
}

textarea {
  background: transparent;
  border: 0;
  outline: 0;
  text-align: center;
  width: 100%;
  max-width: 100%;
  position: absolute;
}

JQUERY:

$(document).ready(function(){

    // função que calcula e aplica a centralização
  function centralizar(){
    $('textarea').css({ 'height' : '0' }); // reseta a altura para nova contagem

    var textareaSHeight = $('textarea')[0].scrollHeight, // pega o valor do scroll do textarea
            textareaHeight = $('textarea').height(); // pega o valor da altura do textarea

    // verifica se tem scroll ou não
    if (textareaHeight < textareaSHeight) {
        var divHeight = $('div').height() / 2, // pega a metade altura da div
                top = divHeight - (textareaSHeight / 2); // calculo final do valor top

      // aplica a altura do textarea e o valor top
        $('textarea').css({ 'height' : textareaSHeight+'px', 'top' : top+'px' });
    }

  }

  centralizar(); // aplica o efeito inicial

  // ajuste automático enquanto digitar
  $('textarea').on('keydown', function(){
    centralizar();
  });

});

Demo: link

Adds vertical-align: middle and inserts an equal line-height into the two elements, so that they are aligned vertically

input, textarea{
  height: 60px; 
  vertical-align:middle;
  line-height: 60px;
 }

<input type="text" value="Olá">
<textarea>Olá</textarea>

I could not get the line breaks to go without line-height , maybe with some JS

Here is a solution with JS, so it disguises well in my understanding:

$('textarea').on('keyup', function() {
  if($('textarea').val().indexOf("\n") >= 0) { // se houver quebras de linha a line-height vai ser o default
      $('textarea').css('line-height', 'normal');
  }
  else { // se não houver quebras de linha a line-height vai ser 60px outra vez
      $('textarea').css('line-height', '60px');
  }
});

input, textarea{
  height: 60px;
  vertical-align:middle;
  line-height: 60px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" value="Olá">
<textarea>Olá</textarea>