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

Question

I have the following doubt, whether in a input text I define the height of 60px the text is centered in the field, but this does not occur in the textarea if I set a height of 60px also.

I looked for some css property but I don’t know if this is possible.

input, textarea{
  height: 60px;
 }

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

Answer 1

I tried to do using jQuery.

I put the <textarea> within a <div>, positioning with absolute and carrying out the calculation of the top for jQuery. It also makes the automatic adjustment for when to insert more words or less 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: https://jsfiddle.net/7j99fkbs/3/

Answer 2

Adds vertical-align: middle and inserts a line-height equal in both 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 couldn’t make the line breaks run without the line-height, maybe with some JS give

Here is a solution with JS, so disguises well to my mind:

$('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>

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