Как на самом деле центрировать (вертикальный и горизонтальный) текст внутри вложенного div

Я знаю, что есть несколько вопросов по этой теме, но я думаю, что они зависят немного от другого CSS properties, заданного ранее.

У меня есть вложенный <div id="tituloParametros>", и мне нужно, чтобы его текст / содержание было центрировано по вертикали и горизонтали.

Это моя разметка:

<div id="outer">

        <div id="parametros">
        <div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
        </div>

        <div id="resultados">
            <div id="graficos">
                <div id="bars"></div>
                <div id="fx"></div>
                <div id="pinchetabla">Tabla inútil</div>
            </div>
            <div id="loquerealmenteimporta"></div>  
        </div>

</div>

А это примененный CSS:

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
}
      #tituloParametros {
        height: 9%;
        width: 100%;
        background-color: red;
        text-align:center;
        vertical-align:middle
      }

#resultados {
  float:right;
  width: 80%;
  height: 100%;
}

      #graficos {
        height: 75%;
        width: 100%;
      }

          #bars {
            float: left;
            height: 100%;
            width: 30%;
          }

          #fx {
            float: left;
            height: 100%;
            width: 30%;
          }          

          #pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }

Я думал так:

text-align:center;
vertical-align:middle

Оба сделают это, но этого не произошло. Добавление display: table-cell; тоже не решает эту проблему, оно фактически обрезает фон до границ текста.

Вот как это выглядит